《CSS揭秘》总结二：css常用样式实现

最新推荐文章于 2024-01-29 11:11:06 发布

原创最新推荐文章于 2024-01-29 11:11:06 发布 · 348 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css揭秘 #css

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用CSS实现裁缝效果、斜条纹背景等特殊视觉效果。通过outline、box-shadow和linear-gradient等属性，实现多样化的网站装饰效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《CSS揭秘》总结二：css常用样式实现

裁缝效果

在这里插入图片描述

实现思路：使用outline属性，将定义的虚线outline，通过outline-offset往内偏移

 <div class="parent">
    裁缝
  </div>
  
 .parent {
    background: #324057;
    width: 400px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: white;
    font-size: 2rem;
    margin: 100px;
    border-radius: 20px;
    outline: 2px dashed currentColor;
    outline-offset: -20px;
  }

outline的特点：

不贴合border-radio，始终保持直角（被认为是bug，可能未来会修改成贴合）
多边框场景不适用

外直内弯

在这里插入图片描述
实现思路：使用outline搭配box-shadow

<div class="normal parent2">
      外直里弯
    </div>
.parent2 {
    border-radius: 20px;
    background: #ff9b00;
    outline: 20px solid ;
    box-shadow: 0 0 0 20px red;
  }

在这里插入图片描述
最外层是outline，红色的是box-showdow;只要把boxshowdow改成跟outline一样的颜色就可以了。
至于box-show的宽度多少最合适呢？这个是可以通过勾股定理算出来的。

也就是（r根号2）的宽度

斜条纹背景

知识点：background:linear-gradient(direction, color…);
在这里插入图片描述

横竖条纹都非常简单：

.parent3 {
    background: linear-gradient(to right,cornflowerblue 50%,orange 0);
    background-size: 30px 100%;
  }

思路：首先定义了一般是蓝，一半是橙；但是size确定义了30px；也就是15px蓝，15px橙；再加上默认的repeat；那么就形成了重复条纹了。

斜条纹（有点麻烦）：

    background: linear-gradient(45deg,orange 25%, cornflowerblue 25%, cornflowerblue 50%,orange 50%,orange 75%, cornflowerblue 75%,cornflowerblue 0);
    background-size: 60px 60px;

如果没有repeat，他长得样子就像下面这样，由4个条纹组成。
在这里插入图片描述
原理：好像铺地砖一样，这样的条纹板砖拼到一起就是一个连贯条纹的效果。
但是这种方式非常蛋疼，应为你稍微改动下角度的话，这个效果就被破坏了。怎么办？难道又专门为了一个角度去计算这一个小格子的样式吗？显然很麻烦。

接下来用到一个威猛的线性效果，repeat-linear-gradient；是的前面多了个repeat这个单词；

.parent5 {
    background: repeating-linear-gradient(45deg, orange , orange 15px ,cornflowerblue 15px, cornflowerblue 30px);
  }

上面代码的意思是：0-15px是橙，15-30px是蓝；你看到好像多余的颜色设置是为了清除渐变过渡效果。