css 样式（圆角,阴影，边框）

最新推荐文章于 2024-10-11 19:10:16 发布

IT00123

最新推荐文章于 2024-10-11 19:10:16 发布

阅读量165

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/IT00123/article/details/125915144

版权

1 盒子的圆角

<style>
.box {
        width: 100px;
        height: 100px;
        background-color: blue;
        border-radius: 10px;
    }
</style>

    <div class="box"></div>

border-radius: 10px; 一个值时4个角都改变

border-radius: 10px 30px; 2个值时是对角改变（左上右下）（右上左下）

border-radius: 10px 30px 20px; 三个值上（左上右下）下

border-radius: 10px 30px 20px 10px; 4个值是安瞬时针旋转对应4个角

border-radius:10px/40px；是改变边框

盒子阴影

c3是box-shadow来添加阴影

  box-shadow: 10px 10px 5px rgba(143, 132, 132, 0.5) inset;

来添加内阴影

外阴影是

  box-shadow: 10px 10px 5px rgba(143, 132, 132, 0.5) ;

内外一起的是

   box-shadow: 10px 10px 5px rgba(143, 132, 132, 0.5) inset, 
7px 5px 5px rgba(159, 155, 155, 0.5);

用图片做盒子的边框

border-image 要使用的元素

 .box2 {
        width: 220px;
        height: 100px;
        border: 15px solid transparent;
        border-image: url(img/border.png) 27 27 round;
    }

border: 15px solid transparent; 不能为1px 背景图不能撑开要设置合适的宽

round是平铺属性

repeat 铺满

 .box3 {
        width: 220px;
        height: 100px;
        border: 15px solid transparent;
        border-image: url(img/border.png) 27 27 repeat;
    }

repeat属性看是和第1个一样，在仔细看是会发现有的菱形是不完整的

 .box4 {
        width: 220px;
        height: 100px;
        border: 15px solid transparent;
        border-image: url(img/border.png) 27 27 stretch;
    }

stretch是拉长效果如下