3html基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#div1{
width: 0;
height: 0;
border: 100px solid white;
border-bottom-color: purple;
}
#div2{
width: 500px;
height: 300px;
background: yellow;
border-radius: 150px;
}
#div3{
width: 0;
height: 0;
border: 100px solid white;
border-top-color: orange;
border-radius: 50%;
}
#div4{
width: 20px;
height: 0;
border: 50px solid white;
border-bottom-color: purple;
}
</style>
</head>
<body>
<div id="div1"></div><br/>
<div id="div2"></div><br/>
<div id="div3"></div><br/>
<div id="div4"></div>
</body>
</html>
第一个为三角形，第二个为椭圆形，第三个为扇形，第四个为梯形。
颜色的填写方法；
1 颜色的英文名称 lightPink
2 Hex RGB #FFB6C1
3 red( xxx,xxx,xxx) 255,182,193
图片边框
border-image-source 指定图片的路径
boeder-image-slice 指定边框图像顶部 右部 底部 左部内内偏移量
border-image-width 指定边框宽度
border-image-outset 指定边框背景向盒子外部延伸的距离
boeder-image-repeat 指定背景图片的平铺方式
box-shadow属性
box-shadow 像素1 像素2 像素3 像素4 颜色值 阴影类型
像素1水平阴影位置，可以为负值（必选属性）
像素2 垂直阴影位置 可以为负值（必选属性）
像素3 阴影模糊半径（可选属性）
像素4 阴影扩展半径，也不可能为负值（可选属性）
颜色值 阴影属性（可选属性）
阴影类型 内阴影（inset）/外属性（默认）（可选属性）
box-sizing 属性
box-sizing：content-box/border-box
content-box 浏览器对盒子的解释遵从W3C标准 定义width和height时它的属性值不包括border和padding
boeder-box 当定义widyh和height时 border和padding的参数值包含在width和height内
可以分别设置四周边框的大小 样式 border在设置时一般 颜色 像素 样式 一起设置 border：1px botted red；
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
浙公网安备 33010602011771号