从零开始学习前端开发 — 16、CSS3圆角与阴影

一、css3圆角： border-radius:数值+单位;

1.设置一个值：border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等)

2.设置两个值

border-radius:50px 5px; 左上，右下为50px,右上，左下为5px

3.设置三个值

border-radius:10px 50px 20px; 左上为10px,右上，左下为50px,右下20px

4.设置四个值

border-radius:0px 10px 30px 50px;

顺时针方向依次为左上0，右上10，右下30，左下50

5.用/来设置第二组值

border-radius:50px/10px;

第一组值代表水平半径为50px,第二组值代表垂直半径为10px

6.还可以单独设置某一个方向的圆角

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

7.设置为圆形

border-radius:50%; (或 border-radius:100%;)

---

 

二、图片边框

1.设置图像边框的路径

border-image-source:url(图片路径);

2.设置图像边框的裁剪位置

border-image-slice:数值;

注：默认中间部分不显示，如果需要显示，添加fill

eg: border-image-slice:27 fill; (设置数值，专指像素)

3.设置图像边框的平铺属性

border-image-repeat:stretch|repeat|round;

stretch 默认值，图像会被拉伸

repeat 图片平铺，碰到边界时会被截断

round 图片平铺，碰到边界会动态调整图片的大小，直至铺满整个容器

eg: border-image-repeat:round stretch;

指水平方向铺满，垂直方向拉伸

---

 

三、文本阴影： text-shadow:x轴偏移量 y轴偏移量 模糊度 颜色值;

eg: text-shadow:3px 3px 5px black,5px 5px 8px gray,10px 10px 8px red;

注：x轴偏移量向右为正，向左为负

y轴偏移量向下为正，向上为负

模糊度默认值为0，值越大，模糊度越大，不允许设置负值

 

---

 

四、盒阴影： box-shadow:x轴偏移量 y轴偏移量 模糊度 扩展半径 颜色值;

eg: box-shadow:5px 5px 3px gray,8px 8px 3px #333;

eg: box-shadow:5px 5px 3px black inset;

注：盒阴影分为内阴影和外阴影两种，默认为外阴影，当设置inset时，为内阴影

eg: box-shadow:0 0 5px 10px gray;

注：扩展半径可以为正值也可以为负值

---

 

扩展：

设置方向为右的三角：

元素{
width:0;
height:0;
border:30px solid transparent;
border-left-color:blue;
}

设置文本描边：-webkit-text-stroke:3px blue;