AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

常用 CSS（上）

2022-12-27 127
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 常用 CSS（上）

本文收集了些常用的 css，用到的时候可以到这里查看。都是直接可以用的。

三角形

用 border 实现

宽高为 0 border 为 100px 的div 看起来这样


image.png


div{
    width:0;
    height: 0;
    border: 100px solid ;
    border-top-color:red ;
    border-right-color: green;
    border-bottom-color:yellowgreen;
    border-left-color: blueviolet;
}
复制代码

以这个为起点，想用哪个三角形就非常容易了。

比如想得到左面紫色三角形，只需要把上右下的三个三角形的 border-border 设成 transparent即可，但这样有一个问题，就是右边还会占有 100px 空间。可以设 border-right-width:0 去掉。

border-right-width: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
复制代码

想得到其它的三角形也是一样，把相对的border-width 设为0 ，相邻两个设为透明。如果想改变高度也很容易，直接修改 border-width 即可。

给用 border 制作的三角形加阴影


image.png

<div class="shadow"></div>
复制代码
.shadow{
width:0;
height: 0;
border: 30px solid transparent;
border-left-width: 0;
border-right-color: green;
filter: drop-shadow(5px 5px 4px black);
}
复制代码

也许你会有疑问，不是有 box-shadow吗？如果用 box-shadow 就会这样

image.png

用 linear-gradient 实现

image.png

div{
  width:100px;
  height:100px;
  background: linear-gradient(45deg ,green 50%,transparent 50%) no-repeat ;
}
复制代码


改变宽高和角度，这种方式可以很容易做出各种直角三角形。直接在 chrome 中动态修改即可，非常方便。


image.png

div {
  width: 200px;
  height: 100px;
  background: linear-gradient(27deg, green 50%, transparent 50%) no-repeat;
}
复制代码

clip-path 实现 三角形

image.png

<div class="triangle"></div>
复制代码
.triangle{
  width: 100px;
  height: 30px;
  background: linear-gradient(red,green);
  clip-path: polygon(0 0,100% 0,30% 100%);
}
复制代码

这才是制作三角形的利器！可以制作任意三角形，背景随意。就是兼容性没有 border 好,而且也无法添加阴影效果。

终极武器 svg

网络异常，图片无法展示
| 

<svg class="triangle" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
     <defs>
      <linearGradient id="myGradient" gradientTransform="rotate(90)">
        <stop offset="5%" stop-color="gold" />
        <stop offset="95%" stop-color="red" />
      </linearGradient>
    </defs>
    <polygon points="0 0,100 50,20 100" fill="url('#myGradient')">
</svg>
复制代码
.triangle{
  width:100px;
  stroke: green;
  stroke-width: 2px;
  filter: drop-shadow(6px 6px 5px black);
}
复制代码

前面的说的几种方案都有局限性，唯有 svg 可以做到随心所欲。svg 不仅可以写三角形，其它形状也可以。


网格


网格用 repeating-linear-gradient 实现。


image.png


width: 100px;
  height: 100px;
  background: repeating-linear-gradient(0deg, rgba(0, 155, 100, .6) 0 10px, transparent 0 20px), 
  repeating-linear-gradient(90deg, rgba(0, 155, 100, .3) 0 10px, transparent 0 20px);
复制代码

用 linear-gradient 也可以实现同样的效果的，而且会更加灵活。repeating-linear-gradient 可以看作是 linear-gradient 的简便写法，让代码看起来更简洁。

虚线

系统自带的虚线效果没什么可操作空间。如果想随意的实现虚线效果，用渐变实现可以随心所欲。


image.png

width: 200px;
height: 2px;
background:linear-gradient(90deg,green 0 70%,transparent 0 100%) repeat-x 0 0 /20px 100%;
复制代码

可以随便调整实线的百分比（当前是 70%)，和一段的宽度(当前是 20px) 生成各种各样的虚线。

也可以这样写,把 起止位置连在一起。


background:linear-gradient(90deg,green 0 70%,transparent 0 100%) repeat-x 0 0 /20px 100%;
复制代码

渐变虚线


image.png

width: 200px;
height: 2px;
background:linear-gradient(90deg,#fff 0 30%,transparent 0 100%) repeat-x 0 0 /20px 100%,
linear-gradient(90deg,green,red);
复制代码

两层背景叠加。

渐变 border

实现直角渐变 border 毫无压力，也非常完美。



image.png


width: 100px;
  height: 100px;
  border: 10px solid;
  border-image: linear-gradient(red,green) 1;
复制代码

添加圆角


image.png

width: 100px;
  height: 100px;
  border: 10px solid;
  border-image: linear-gradient(red,green) 1;
  //裁剪成圆角
  clip-path: inset(0 round 10px);
复制代码

这种裁剪成圆角的方式只能应用于border 较粗的情况，太细了，border-radius又较大的情况下边缘就看不见border了。比如我们看下 2px 的效果：

image.png

也许你会想到两层渐变叠加进行模拟。效果上免强可以，就是四角处有点厚（下图是 border 2px 的效果，而且代码也比较多。并不是很推荐。如果是 1px 宽的话，四角的厚度并不明显，免强可以一用。


image.png


.border {
  width: 100px;
  height: 100px;
  position: relative;
}
.border::after{
  content:'';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  background:linear-gradient(red,green);
  border-radius: 10px;
}
.border::before{
  border-radius: 10px;
  content:'';
  top: 2px;
  left: 2px;
  width:calc(100% - 4px);
  height: calc(100% - 4px);
  position: absolute;
  z-index: 2;
  background:#fff;
}
复制代码

同心圆

用径向渐变写同心圆太轻而易举了


image.png

.border {
  width:100px;
  height:100px;
  background: radial-gradient(red 0,red 10px,green 0,green 20px,transparent 0) no-repeat;
}
复制代码

这样写可以，但是会有很多锯齿，所以我们增加 1px 渐变过渡，让边缘不这么生硬


image.png


.border {
  width:100px;
  height:100px;
  background: radial-gradient(red 0,red 10px,green 11px,green 20px,transparent 21px) no-repeat;
}
复制代码

现在看起来很平滑了。

如果你用第一种写法看起来也很平滑，是因为你的显示器很好，可以显示细微的部分。

渐变文字


image.png

<div class="text-clip">一二三四五六七八九十</div>
复制代码
.text-clip{
  font-weight: bold;
  font-size: 30px;
  height: 40px;
  width:320px;
  /*最主要的就这三句*/
  background: linear-gradient(90deg,red,green);
  -webkit-background-clip: text;
  color: transparent;
}
复制代码

很简单，就是用文字来 clip 背景，再把文字透明就可以了。

目前 -webkit- 前缀是必须要加的

文章标签：
前端开发
Web App开发
IAM17
目录
相关文章
风与烈酒
|
前端开发
css实现帘幕效果
css实现帘幕效果
风与烈酒
84 0
米果粒
|
3月前
|
前端开发
内嵌式CSS
【9月更文挑战第2天】内嵌式CSS。
米果粒
33 3
游客fz577umxdejsg
|
4月前
|
前端开发 UED
深入了解的人不会这么说CSS
深入了解的人不会这么说CSS
游客fz577umxdejsg
37 0
好奇的菜鸟
|
6月前
|
前端开发
CSS外部样式
CSS外部样式
好奇的菜鸟
69 0
bug丶小狼人
|
XML 前端开发 UED
CSS基本讲解与使用(详解)
CSS基本讲解与使用(详解)
bug丶小狼人
112 0
日星月云
|
前端开发
CSS
CSS
日星月云
88 0
前端迷
|
前端开发
CSS中的::after ::before
CSS中的::after ::before
前端迷
72 0
菜园前端
|
前端开发
CSS 介绍
CSS介绍
菜园前端
116 0
如风暖阳
|
前端开发
CSS简识
本文主要介绍用于丰富前端界面的语言——CSS，只介绍一些较为常用的知识。
如风暖阳
103 0
CSS简识
掘金防诈骗集团CEO
|
前端开发
CSS画一个转动筛子
CSS画一个转动筛子
掘金防诈骗集团CEO
142 0
CSS画一个转动筛子