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

最新推荐文章于 2023-04-01 19:20:54 发布

原创最新推荐文章于 2023-04-01 19:20:54 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

本文介绍了CSS中实现盒子圆角、阴影和自定义边框的技巧。通过border-radius属性可以设置不同角的圆角效果，如单一值、两个值、三个值和四个值的使用方式。同时，利用box-shadow属性添加外阴影、内阴影或两者结合。此外，border-image属性允许使用图片创建复杂的边框效果，通过repeat、round和stretch等平铺方式实现不同的视觉效果。

部署运行你感兴趣的模型镜像

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是拉长效果如下

您可能感兴趣的与本文相关的镜像

Linly-Talker

AI应用

Linly-Talker是一款创新的数字人对话系统，它融合了最新的人工智能技术，包括大型语言模型（LLM）、自动语音识别（ASR）、文本到语音转换（TTS）和语音克隆技术