CSS Note 1.8边框

最新推荐文章于 2023-03-22 00:19:05 发布

原创最新推荐文章于 2023-03-22 00:19:05 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#边框

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS创建网页的基本布局技巧，包括div元素的使用、内边距、背景颜色、边框样式和宽度的设置。通过具体的代码示例，展示了如何应用圆角、图片边框和阴影效果，提供了丰富的视觉效果实现方法。

一、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) 改为内部阴影。
*/

三、效果展示