CSS常见代码集合，省去切图烦恼

一花一草一木一世界

于 2020-06-04 09:36:58 发布

阅读量264

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xshiyi110/article/details/106538301

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

SS3有许多亮眼的特性，比如阴影shadow、动画animation、形变transform、渐变gradient、滤镜filter等，合理运用这些特性，可以实现许多高大上的效果。如果觉得有用请点个赞或者收藏。

三角形

利用 border-color支持 transparent这一特性，隐藏三条边框，实现三角形。

下面展示一些内联代码片。

<style>
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  box-sizing: border-box;
  border-width: 0 10px 10px;
  border-color: transparent transparent #c5c5c5 transparent;
}
</style>
<div class="triangle"></div>

效果如下：

左上三角形

<style>
.left-top-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  box-sizing: border-box;
  border-width: 10px;
  border-color: #c5c5c5 transparent transparent #c5c5c5;
}
</style>
<div class="left-top-triangle"></div>

效果如下：

正五边形

<style>
.pentagon {
  width: 54px;
  position: relative;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: #c5c5c5 transparent;
}

.pentagon::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent #c5c5c5;
}
</style>
<div class="pentagon"></div>

效果如下：

气泡框

使用绝对定位进行三角形覆盖，实现气泡框突出部分。

<style>
.bubble-tip {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  border: 1px solid #c5c5c5;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
}
.bubble-tip::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ffffff transparent transparent;
  position: absolute;
  top: 5px;
  left: -10px;
  z-index: 2;
}
.bubble-tip::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #c5c5c5 transparent transparent;
  position: absolute;
  top: 5px;
  left: -11px;
  z-index: 1;
}
</style>
<div class="bubble-tip"></div>

效果如下：

全屏灰色（特殊日期使用）

使用滤镜filter的grayscale函数。

<style>
.filter {
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /*opera*/
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie*/
  filter: gray; /*ie9- */
}
</style>
<html class="filter">
  <img src="https://cdn.pixabay.com/photo/2015/04/20/17/01/flower-731830_960_720.jpg" />
</html>

效果如下：

卡券贴

在CSS3当中，background添加了background-size属性，控制背景图片的大小，配合background-position属性，可以在一个背景下面展示多张图片。详见background-MDN。

卡券贴的核心是使用透明白色径向渐变radial-gradient，分别让4张背景图中的左下角、右下角、右上角和左下角出现缺省，再利用drop-shadow实现元素阴影，从而达到效果。

radial-gradient语法如下：

radial-gradient(shape size at position, start-color, ..., last-color)

值	描述
shape	确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。可混合使用，如top right
start-color, …, last-color	用于指定渐变的起止颜色。

<style>
.coupon{
  width: 200px;
  height: 80px;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat,
    radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat,
    radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat;
  filter: drop-shadow(3px 3px 3px #c5c5c5);
}
</style>

<div class="coupon"></div>

效果如下：

文本溢出自动省略号

核心是CSS3属性text-overflow: ellipsis。

<style>
.ellipsis {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<div class="ellipsis">
  明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
  转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</div>

效果如下：

收藏本文，常期更新css小技巧

一花一草一木一世界

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常见代码集合，省去切图烦恼

SS3有许多亮眼的特性，比如阴影shadow、动画animation、形变transform、渐变gradient、滤镜filter等，合理运用这些特性，可以实现许多高大上的效果。如果觉得有用请点个赞或者收藏。三角形利用 border-color支持 transparent这一特性，隐藏三条边框，实现三角形。下面展示一些内联代码片。<style>.triangle { width: 0; height: 0; border-style: solid; box-sizi
复制链接

扫一扫

专栏目录