正文
CSS 常见样式 特殊用法 贯穿线&徽章&箭头
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
flowchart 箭头图标 勿删
贯穿渐变线,中间插值
- 如图:
<h3 class="brief-modal-title">
<span>公告</span>
</h3>
.brief-modal-title
position relative
text-align center
margin 15px auto 15px
width 85px
background-image linear-gradient(90deg, #fff, #333 50%, #fff)
background-size 100% 1px
background-position 50%
background-repeat no-repeat
> span
font-size 12px
padding 0 6px
color #999
background-color #fff
徽章
- 如图:
<span class="content-tag">
<span class="mini-tag">品牌</span>
</span>
.content-tag
display inline-block
border-radius 2px
background-image linear-gradient(90deg, #fff100, #ffe339)
width 36px
height: 18px
margin-right 10px
color #6a3709
font-style normal
position relative
.mini-tag
position absolute
left 0
top 0
right -100%
bottom -100%
font-size 24px
transform scale(.5)
transform-origin 0 0
display flex
align-items center
justify-content center
图标箭头
如图:
// 箭头由伪元素构成
<i class="content-icon"></i>
#################分隔符
<div class="discounts-right">4 个优惠</div>
.content-icon
width 20px
position relative
height 16px
&::after
content ""
border-style solid
border-width: 6px 0 6px 7px
border-color transparent transparent transparent rgba(0, 0, 0, .67)
position absolute
left 8px
top 3px
#################分隔符
.discounts-right
width 50px
flex-shrink 0
position relative
padding-right 10px
text-align right
&::after
content ""
display block
border-style solid
border-width 4px 4px 0
border-color rgba(0, 0, 0, .57) transparent transparent
position absolute
top 50%
transform translateY(-50%)
right 0
不常见样式收集
will-change transform
CSS 常见样式 特殊用法 贯穿线&徽章&箭头的更多相关文章
-
CSS 常见样式 特殊用法 贯穿线&徽章&箭头
### 贯穿渐变线,中间插值- 如图: > ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png) ![在这里插入图片描述 ...
-
Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
-
常用 css html 样式
CSS基础必学列表 CSS width宽度 CSS height高度 CSS border边框 CSS background背景 CSS sprites背景拼合 CSS float浮动 CSS mar ...
-
css内容样式属性
设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...
-
CSS选择器的新用法
前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...
-
CSS基础【2】:CSS常见属性
CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...
-
WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
-
css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
-
CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
随机推荐
-
[源码解析] 当 Java Stream 遇见 Flink
[源码解析] 当 Java Stream 遇见 Flink 目录 [源码解析] 当 Java Stream 遇见 Flink 0x00 摘要 0x01 领域 1.1 Flink 1.2 Java St ...
-
VM获取子网掩码和网关
-
SpringCloude简记_part3
18. SpringCloud Alibaba Sentinel实现熔断与限流 18.1 Sentiel 官网 https://github.com/alibaba/Sentinel 中文 https ...
-
Redis高可用集群搭建
绪论 redis集群需要至少要三个master节点,下面将搭建三个master节点,并且给每个master再搭建一个slave节点,总共6个redis节点,这里用三台机器部署6个redis实例,每台机 ...
-
hdu.2042 超级楼梯
这种递归来写,除了递归我也想不到怎么写了 AC代码: #include<iostream>using namespace std;int x[41];//打表,不打表我不用想就知道过不了, ...
-
Git clone时出现fatal:the remote end hung up unexpectedly
以HTTPS方式进行git clone时出现如下错误: 方法1:增大缓存 git config http.postBuffer 524288000 尝试无效: 方法2:配置git的最低速度和最低速度时 ...
-
开始System.out.println();
第一篇博客 我在逛别人的博客的时候,发现他们有些内容是写他们自己的人生,有些是关于技术方面的个人观点分享探讨,每当看到好的文章的时候,我已经习惯的去点击收藏.有的时候我也在想,我为什么就不能做一个输出 ...
-
idea使用技巧一常用快捷键
快捷键 功能 ctrl+x 删除行 ctrl+d 复制行 ctrl+n 查找类 ctrl+f 查找文本 ctrl+j 自动代码 ctrl+h 显示类结构图 ctrl+q 显示注释文档 ctrl+p 方 ...
-
UTF-8、GB2312、GBK编码格式详解和编码示例
UTF-8.GB2312.GBK编码格式详解 参考文章 UTF-8 使用1~4个字节对每个字符进行编码 128个ASCII字符字需要一个字节编码 带有附加符号的拉丁文.希腊文.西里尔字母.亚美尼亚语. ...
-
从APP的启动说起
iOS里面APP的启动,过程有些复杂,今天我们来抽丝剥茧,一步步探讨一下APP的启动会经历哪些过程. 首先,用户点击iPhone里面的某个APP的icon,Kernel内核会开始初始化空间并创建进程, ...
### 贯穿渐变线,中间插值- 如图: > ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png) ![在这里插入图片描述 ...
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
CSS基础必学列表 CSS width宽度 CSS height高度 CSS border边框 CSS background背景 CSS sprites背景拼合 CSS float浮动 CSS mar ...
设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...
前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...
CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
-
[源码解析] 当 Java Stream 遇见 Flink
[源码解析] 当 Java Stream 遇见 Flink 目录 [源码解析] 当 Java Stream 遇见 Flink 0x00 摘要 0x01 领域 1.1 Flink 1.2 Java St ...
-
VM获取子网掩码和网关
-
SpringCloude简记_part3
18. SpringCloud Alibaba Sentinel实现熔断与限流 18.1 Sentiel 官网 https://github.com/alibaba/Sentinel 中文 https ...
-
Redis高可用集群搭建
绪论 redis集群需要至少要三个master节点,下面将搭建三个master节点,并且给每个master再搭建一个slave节点,总共6个redis节点,这里用三台机器部署6个redis实例,每台机 ...
-
hdu.2042 超级楼梯
这种递归来写,除了递归我也想不到怎么写了 AC代码: #include<iostream>using namespace std;int x[41];//打表,不打表我不用想就知道过不了, ...
-
Git clone时出现fatal:the remote end hung up unexpectedly
以HTTPS方式进行git clone时出现如下错误: 方法1:增大缓存 git config http.postBuffer 524288000 尝试无效: 方法2:配置git的最低速度和最低速度时 ...
-
开始System.out.println();
第一篇博客 我在逛别人的博客的时候,发现他们有些内容是写他们自己的人生,有些是关于技术方面的个人观点分享探讨,每当看到好的文章的时候,我已经习惯的去点击收藏.有的时候我也在想,我为什么就不能做一个输出 ...
-
idea使用技巧一常用快捷键
快捷键 功能 ctrl+x 删除行 ctrl+d 复制行 ctrl+n 查找类 ctrl+f 查找文本 ctrl+j 自动代码 ctrl+h 显示类结构图 ctrl+q 显示注释文档 ctrl+p 方 ...
-
UTF-8、GB2312、GBK编码格式详解和编码示例
UTF-8.GB2312.GBK编码格式详解 参考文章 UTF-8 使用1~4个字节对每个字符进行编码 128个ASCII字符字需要一个字节编码 带有附加符号的拉丁文.希腊文.西里尔字母.亚美尼亚语. ...
-
从APP的启动说起
iOS里面APP的启动,过程有些复杂,今天我们来抽丝剥茧,一步步探讨一下APP的启动会经历哪些过程. 首先,用户点击iPhone里面的某个APP的icon,Kernel内核会开始初始化空间并创建进程, ...