-
box-shadow: 0, 0, 40px rgba(0, 0, 0, 0.1) inset;
0, 0 可实现四边阴影
查看全部 -
boxx-shodow
查看全部 -
box-shadow: 添加一个或多个阴影
box-shadow:h-shadow v-shadow blur spread color inset
参数:
h-shadow（必需）：水平阴影的位置，允许负值，正值为向右；inset的话，正值为阴影在左
v-shadow（必需）：垂直阴影的位置，允许负值，正值为向下；inset的话，正值为阴影在上
blur（可选）：模糊程度
spread（可选）：阴影的尺寸/模糊距离
color（可选）：阴影的颜色，请参阅CSS颜色值
inset（可选）：将外部阴影（outset）改为内部阴影
浏览器兼容：IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1支持box-shadow属性
查看全部 -
transform:rotate(-4deg)
对图形进行旋转
查看全部 -
transform: 向元素应用2D或3D转换
transform:none|transform-functions
参数：
skew(x-angle,y-angle)定义沿着X和Y轴的2D倾斜转换
skewX(angle)定义沿着X轴的2D倾斜转换
skewY(angle)定义沿着Y轴的2D倾斜转换
浏览器兼容：
Internet Explorer 9支持替代的-ms-transform属性（仅适用于2D转换）
Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）
Opera只支持2D转换
查看全部 -
clear:both：元素被向下移动用于清除之前的左右浮动。
查看全部 -
.effect:after,.effect:before{}
同时在.effect的前面和后面插入一个同样的盒子
查看全部 -
z-index:-1
新插入的content就会跑到下面
查看全部 -
border-radius:100px 10px
左上角和右下角100，左下角和右上角10
查看全部 -
border-radius:100px/10px
水平方向的弯曲半径是100px，垂直方向是10px
查看全部 -
通过方向值top right bottom left来确定盒子的大小size
查看全部 -
<body> <div class="wrap effect"> <h1>Shadow Effect</h1> </div> </body>
.effect:after{ content:'hello'; }因为h1的line-height设为了200px，而.wrap的height也是200px，所以hello跑到了盒子外面
查看全部 -
content内容除了可以是字符串外，也可以用attr来获取标签上的一些属性，也可以用url来指定一张图片、一个文件
查看全部 -
<body> <div class="wrap effect"> <h1>Shadow Effect</h1> </div> </body>
.effect:before{ content:'hello'; }查看全部 -
:after与:before用法
:after选择器：在被选元素的内容后面插入内容
:before选择器：在被选元素的内容前面插入内容
说明：需使用content属性来指定要插入的内容
浏览器兼容：IE、Firefox、Chrome、Safari、Opera
对于IE8及更早版本中的:after，必须声明<!DOCTYPE>
查看全部 -
box-shadow:0 0 50px rgba(255,0,0,0.1) inset
前两个数值设为0的话，内阴影会从四边都出来
查看全部 -
浏览器兼容
查看全部 -
box-shadow: 添加一个或多个阴影
box-shadow:h-shadow v-shadow blur spread color inset
参数:
h-shadow（必需）：水平阴影的位置，允许负值，正值为向右；inset的话，正值为阴影在左
v-shadow（必需）：垂直阴影的位置，允许负值，正值为向下；inset的话，正值为阴影在上
blur（可选）：模糊程度
spread（可选）：阴影的尺寸/模糊距离
color（可选）：阴影的颜色，请参阅CSS颜色值
inset（可选）：将外部阴影（outset）改为内部阴影
浏览器兼容：IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1支持box-shadow属性
查看全部 -
style.css
查看全部 -
index.html
查看全部 -
css3 box shadow 曲线阴影 翘边阴影
查看全部
举报