CSS3 的边框

CSS3 新增了边框圆角、边框阴影、边框图片特性

border-radius

首先要理解圆、圆心、长半径、短半径的概念,正圆是椭圆的一种特殊情况

border-radius 属性可设置四个值,分别表示四个圆角。并且可以设置两组,第一组表示横轴半径,第二组表示纵轴半径。

可分别设置长、短半径,以“/”进行分隔,遵循“1,2,3,4”规则,“/”前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4位置 )

1
2
3
4
/* 四个圆角是一样的特殊情况 */
div {
border-radius: 4px 4px 4px 4px / 4px 4px 4px 4px;
}

当圆角半径小于或等于边框宽度时,元素内角是直角

box-shoadow

box-shoadow: [inset] h-shadow v-shadow [blur spread color];

inset 设置内置阴影
h-shadow 水平偏移量
v-shadow 垂直偏移量
blur 模糊度
spread 阴影扩展
color 阴影颜色

特点
水平偏移量 正值向右 负值向左 垂直正值向下 负值向上。
模糊度是不能为负
关于模糊度:从一个颜色值在一定距离内进行一个渐变至透明的过程。
移量和扩展也是数学运算的,即正负会相互抵消。
偏移量和模糊度是可以相加计算,偏移量负号只代表方向。
设置边框阴影不会影响盒子的布局,即不会影响其兄弟元素的布局。
spread可以与blur、h-shadow、v-shadow相互抵消,blur不可为负值
可以设置多重边框阴影,实现更好的效果,增强立体感

border-image

The End

CSS3 文本

CSS3 对文字的处理提供了阴影、溢出处理、换行处理

CSS3 的颜色

CSS3 新增了两种表示颜色的方式

CSS3 的选择器

CSS3 的选择器比 CSS2 强大了很多

绚丽的 CSS3

CSS3 扩展了 CSS2.1 ,CSS 变得更绚丽多彩了

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×