正文

CSS 常见样式 特殊用法 贯穿线&徽章&箭头

IP云
IP云V管理员/0 阅读
11/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

### 贯穿渐变线,中间插值
- 如图:

> ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png)
```html
<h3 class="brief-modal-title">
<span>公告</span>
</h3>
```
```css
.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
```
***
### 徽章
- 如图:
>![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427201200827.png)
```html
<span class="content-tag">
<span class="mini-tag">品牌</span>
</span>
```
```css
.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
```
***
### 图标箭头
如图:
>
>![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427201823131.png)
>![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427201851113.png)

```html
// 箭头由伪元素构成
<i class="content-icon"></i>

#################分隔符

<div class="discounts-right">4 个优惠</div>
```
```css
.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
```

### 不常见样式收集
```css
will-change transform
```

CSS 常见样式 特殊用法 贯穿线&徽章&箭头的更多相关文章
  1. CSS 常见样式 特殊用法 贯穿线&徽章&箭头

    贯穿渐变线,中间插值 如图: <h3 class="brief-modal-title"> <span>公告</span> </h3&gt ...

  2. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  3. 常用 css html 样式

    CSS基础必学列表 CSS width宽度 CSS height高度 CSS border边框 CSS background背景 CSS sprites背景拼合 CSS float浮动 CSS mar ...

  4. css内容样式属性

    设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...

  5. CSS选择器的新用法

    前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...

  6. CSS基础【2】：CSS常见属性

    CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  9. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

随机推荐
  1. 基于Prometheus和Grafana打造业务监控看板

    前言 业务监控对许许多多的场景都是十分有意义,业务监控看板可以让我们比较直观的看到当前业务的实时情况,然后运营人员可以根据这些情况及时对业务进行调整操作,避免业务出现大问题. 老黄曾经遇到过一次比较尴 ...

  2. Vue的Options

    el:挂载点 与$mount有替换关系 new Vue({ el: "#app" }); new Vue({}).$mount('#app') 注:被你选为挂载点的那个元素,如果在 ...

  3. 学生成绩管理系统（SSM+MySQL+JSP）

    开发工具:Eclipse前端技术:基础:html+css+JavaScript框架:JQuery+H-ui后端技术:Spring+SpringMVC+mybatis模板引擎:JSP数据库:mysql ...

  4. File类 -《学堂在线》

    File类的作用 ·创建.删除文件: ·重命名文件:判断文件的读写权限及是否存在: ·设置和查询文件的最近修改时间等: ·构造文件流可以使用File类的对象作为参数. //: FileTester.j ...

  5. 正则表达式断言精讲 Java语法实现

    目录 断言 1.2.3.1 情景导入 什么是断言 断言的语法规则 零宽断言为什么叫零宽断言 零宽 前行 负向 断言DEMO 断言的基础应用和实际用处 验证不包含 验证开头包含 验证开头包含且匹配到的数 ...

  6. ABP开发框架的技术点分析（1）

    ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型.ABP框架可以 ...

  7. Cookie：SameSite，防止CSRF攻击

    前言 最近在本地调试时,发现请求接口提示“未登录”,通过分析HTTP请求报文发现未携带登录状态的Cookie: PS:登录状态Cookie名是TEST 再进一步分析,发现Cookie的属性SameSi ...

  8. Math Problem（数学）

    链接:https://ac.nowcoder.com/acm/contest/893/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  9. wpf之DataGrid绑定DataTable，其中DataGridComboBoxColumn双向绑定枚举enum

    百度了快一天,没结果,除了几个原创的,都是复制粘贴的内容. 不想用别的笨办法,于是脑洞大开,想出了我的办法. 首先是前台代码,与网上的比较类似: xmlns:jz="clr-namespac ...

  10. C# 压缩源文件（导出源文件word文件）

    说明 1 : 在webUI 公共类,存放 ZipHelper 类 说明  2 :判断文件路径是否存在,不存在则创建文件夹 说明 3  : 引用类方法,判断压缩文件,返回的,是true/false 引用 ...

相关阅读

目录[+]