CSS效果
1.box-shadow 投影
(1)含义:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2- 4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
(2)作用:1.营造层次感(立体感)2.充当没有宽度的边框(没有大小,不会占据位置)3.特殊效果
(3)语法
{box-shadow: h-shadow v-shadow blur spread color inset;}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
(4)取值说明
inset
: 默认阴影在边框外。使用 inset 后,阴影在边框内(即使是透明边框),背景之上内容之下。
<offset-x>
<offset-y>
: 这是头两个 <length>
值,用来设置阴影偏移量。<offset-x>
设置水平偏移量,如果是负值则阴影位于元素左边。 <offset-y>
设置垂直偏移量,如果是负值则阴影位于元素上面。可用单位请查看 <length>
。如果两者都是0,那么阴影位于元素后面。这时如果设置了 <blur-radius>
或 <spread-radius>
则有模糊效果。
<blur-radius>
: 这是第三个 <length>
值。值越大,模糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。
<spread-radius>
: 这是第四个 <length>
值。取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。
<color>
:如果没有指定,则由浏览器决定——各浏览器默认取色不一致,注意:在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证)
2.text-shadow
(1)含义:给文字进行投影
(2)作用: ①立体感 ②印刷品质感(边缘有模糊效果)
(3)语法
text-shadow: h-shadow v-shadow blur color;
div {text-shadow:X轴偏移量 Y轴偏移量 阴影范围大小 阴影范围大小}
3.border-radius 圆角
(1)含义:向 div 元素添加圆角边框
(2)语法
border-radius: 1-4 length|% / 1-4 length|%;
(3)取值说明
“/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径
length
:定义圆角的形状;由浮点数字和单位标识符组成的长度值。不可为负值。
%
:以百分比定义圆角的形状
(4)注意:
-
相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
-
按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同
-
如果第二个值省略&#x