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

本文介绍如何使用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是蓝;你看到好像多余的颜色设置是为了清除渐变过渡效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值