边框与圆角

边框的三要素

border属性需要三个要素

border: 1px solid red;
		线宽度 线型 线颜色

线型

线型值	意义
solid	实线
dashed	虚线
dotted	点状线

边框的三要素小属性

边框三要素可以拆分为小属性

小属性	意义
border-width	线宽
border-style	线型
border-color	线颜色

四个方向的边框

属性	意义
border-top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

四个方向边框的三要素小属性

属性	意义
border-top-width	上边框宽度
border-top-style	上边框线型
border-top-color	上边框颜色
border-right-color	右边框宽度
border-right-style	右边框线型
border-right-color	右边框颜色
border-bottom-color	下边框宽度
border-bottom-style	下边框线型
border-bottom-color	下边框颜色
border-left-color	左边框宽度
border-left-color	左边框线型
border-left-color	左边框颜色

去掉边框

border-left: none;属性即可去掉左边框，以此类推

利用边框制作三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* transparent是透明色 */
            border: 20px solid transparent;
            border-top-color: red;
        }
        .box2 {
            width: 0;
            height: 0;
            /* transparent是透明色 */
            border: 20px solid transparent;
            border-bottom-color: red;
        }
        .box3 {
            width: 0;
            height: 0;
            /* transparent是透明色 */
            border: 20px solid transparent;
            border-right-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

圆角

border-radius属性的值通常为px单位，表示圆角的半径

border-radius属性可以单独设置四个圆角。

border-radius: 10px 20px 30px 40px;
				左上 右上 右下 左下 顺时针

小属性

属性	意义
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-left-radius	左下角
border-bottom-right-radius	右下角

百分比为单位

border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里

正方形盒子如果设置的border-radius属性为50%，就是正圆形

border-radius:20%;

阴影

box-shadow 属性用来实现盒子的阴影

box-shadow: 10px 20px 30px rgba(0,0,0,.4);
			x偏移 y偏移 模糊量 颜色

阴影延展

box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4);
							阴影延展

内阴影

box-shadow 属性值前加inset单词，表示内阴影

box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,.4);

CSS3学习笔记(7)-边框与圆角