一、Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test4.css">
</head>
<body>
<div></div>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
二、CSS
@charset "UTF-8";
div{
margin: 10px;
background-color: peachpuff;
width: 240px;
height: 120px;
border: 2px green inset;
}
#div1{
border-bottom-left-radius:10px 30px ;
}
#div2{
border-image: url("2.jpg");
border-image-slice: 20% fill;
border-image-width: 10px;
border-image-repeat: round;
box-shadow:-5px 5px 5px 5px black ;
}
/*
border:width color style;复合属性，后面分别设置边框宽度/颜色/风格
border-style对应的值有：
none 无边框
solid 实线
dotted 点状边框
dashed 虚线边框
double 双线边框
groove/ridge 3D凹槽边框/3D脊状边框
inset/outset 内阴影/外阴影
border-bottom/border-top/border-left/border-right 复合属性，对应设置边框的四个边
border-radius 设置1个值时，四个角均为20px的圆角；设置2个值时，对应的左上右下的圆角；设置三个值时，对应的是左上/左下右上/右下；
设置四个值时，对应的是左上/右上/右下/左下
border-top-right-radiusborder-bottom-right-radius/border-top-left-radius/border-bottom-left-radius:10px 30px 第一个值为x轴上的距离，第二个为y轴上的距离
border-image-width 复合属性，设置图片边框宽度
border-image-slice 复合属性，属性规定图像边框的向内偏移,图片的按照九宫格方式切割的四个角代表边框的四个角，九宫格中间图片代表边框的四条线，后面fill会将九宫格中间的图片进行填充
border-image-outset: 复合属性，设置边框超出的大小，像素越大边框距离内容就越远
border-image-repeat 复合属性，可以设置上下左右的边框填充方式，表示图片的填充方式，值为repeat，表示九宫格中间的图片进行重复填充，四个角不变；stretch拉伸；round重复铺满并对图片进行调整；
两者区别当九宫格中间的图片在四个角出不能完整平铺时，repeat会平铺半个，而round则会对图片调整
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
*/
三、效果展示
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
