2 game life qc Game_Life_qc 于 2016.02.16 23:38 提问

box-shadow注意什么才好看?

之前用过box-shadow这个属性,可是总觉得自己弄的太难看,有什么技巧或者经验吗

2个回答

caozhy
caozhy   Ds   Rxr 2016.02.17 07:48
已采纳

参考:http://blog.csdn.net/freshlover/article/details/7610269

要好看不光是怎么设置box-shadow,关键是要和你整个页面搭配。比如你的页面使用平面风格,那么box-shadow偏偏是个立体的肯定就不好看,反过来也是。

Game_Life_qc
Game_Life_qc 回复caozhy: 谢谢
2 年多之前 回复
showbo
showbo   Ds   Rxr 2016.02.17 09:31

caozhy说的很对,要和页面整体搭配协调才会好看,单单一个box-shadow很好看是不可能的

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
利用box-shadow制作好看的阴影悬浮特效
很多人都知道有box-shadow,但是自己实际用的时候,会发现自己做的阴影特效都特别的丑,下面我就给大家分享一下各种好看的阴影特效。效果图:代码:<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS3实现的各种阴影效果</tit
做一个萌萌哒的button之box-shadow
接上篇:http://blog.csdn.net/u010037043/article/details/47035077 一、box-shadow box-shadow是给元素块添加周边阴影效果。 box-shadow: inset X-offset Y-offset blur spread color ; box-shadow:[投影方式] X轴偏移量 Y轴偏移量
box-shadow实现外发光效果
box-shadow:-1px 0 20px #3B3B3B(左边), 1px 0 20px #3B3B3B(右边), 0 -1px 20px #3B3B3B(上边), 0 1px 20px #3B3B3B(下边)**用法:** box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:水平阴影位置(允许负值) v-shad
box-shadow的内外阴影
一般我们设一个框的阴影都是用box-shadow:0px 2px 1px 5px #000;使框的内外都有阴影; 但设置inset会舍弃框外的阴影,留下框内的阴影,渲染盒子内部的 box-shadow:0px 2px 0px 6px inset;
高性能动画“box-shadow”属性
本文从《[How to animate "box-shadow" with silky smooth performance](http://tobiasahlin.com/blog/how-to-animate-box-shadow/)》编译而来,英文没问题的同学,看原文找原味。
css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)
做完后效果如下: 上面是曲边阴影,下边是翘边阴影。曲边阴影下部是类似弧线,翘边效果四角旁边翘起阴影。 *{ margin:0; padding: 0; } ul{ list-style: none; } .wrap{ width: 70%; height: 200px; background-color: #fff; margin: 50px auto
box-shadow如何显示在它后面元素上面?
box-shadow如何显示在它后面元素上面?
硬盘图标变彩钻图标工具
嘿嘿超级好看哦,其他的我就不用说了,自己用了才知道什么是好看!
一些菜单和背景颜色好看
一些菜单和背景颜色好看一些菜单和背景颜色好看一些菜单和背景颜色好看一些菜单和背景颜色好看
CSS并不简单--走进border、box-shadow和outline
这篇文章主要介绍标题中三个属性独特的一面。不独特你打我): 一、border  其实对于border,想必大家已经了解很多了。所以我就不啰嗦太多的基本东西。  第一点我们要知道border的真实面貌: width: 0; height: 0; border: 30px solid transparent; border-top-color: rgb(222,11,22)