css必备知识点

时间  2019-11-08
标签 css 必备 知识 栏目 CSS 繁體版
原文   原文链接

1、在一个div中实现未知图片上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: red;
        }
        .innerImg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
复制代码

效果以下：css

2、使用display:table-cell和水平居中、垂直居中来实现图片居中

<body>
    <style>
        .outer {
            display: table-cell;
            width: 600px;
            height: 600px;
            margin: 0 auto;
            text-align: center;
            vertical-align: middle;
            background: rebeccapurple;
        }
        img{
            vertical-align:middle;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
复制代码

3、使用flex布局

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
复制代码

效果与上图相同html

4、多行文字垂直居中

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: pink;
        }
        p {
            width: 300px;
        }
    </style>
    <div class="outer">
      <p>豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君做宰，路出名区；童子何知，躬逢胜饯。</p>
    </div>
</body>
复制代码

效果图：jquery

5、已知宽高的上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
        .inner {
            position: relative;
            width: 200px;
            height: 300px;
            left: 50%;
            top: 50%;
            margin-left: -100px; // 或 transform: translateX(-50%)
            margin-top: -150px; // 或 transform: translateY(-50%)
            background: white;
        }
    </style>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
复制代码

效果以下：css3

6、省略号

单行文本省略号，部分浏览器须要加width属性。web

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //规定段落中的文本不进行换行
复制代码

多行文本api

（1）webkit浏览器或移动端的页面浏览器

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
复制代码

跨浏览器兼容方案bash

p {
    position: relative;
    line-height: 2em;
    height: 6em;
    overflow: hidden;
}
p::after {
    content: "...";
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
}
复制代码

注意：app

1.height高度是line-height的3倍；ide

2.要支持IE8，须要将::after替换成:after

7、vertical-align: middle;

如何让div里的图片和文字同时上下居中

img标签是行内元素，设置文本和图片垂直居中时须要把div的line-height和height的值设置相同便可。
而且img须要设置vertival-align：middle；

复制代码

vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素。

vertical-align：baseline/top/middle/bottom/sub/text-top;
复制代码

8、cursor的url属性

cursor的属性若是为url，须要使用图片做为效果时，图片的大小不能超过128px*128px

9、transfrom的rotate属性在span标签下失效

由于span标签是inline属性，rotate只在inline-block或block属性时生效。

10、flex实现内部元素三等分

<body>
    <style>
        .tab {
            display: flex;
            width: 100%;
            height: 100px;
            background: blue;
            list-style: none;
        }
        li {
            flex: 1; // 表示子元素之间平均分配
            background: red;
        }
        li:nth-child(2){
            background: yellow;
        }
    </style>
    <ul class="tab">
        <li>flex1</li>
        <li>flex2</li>
        <li>flex3</li>
    </ul>
</body>
复制代码

效果以下：

flex-grow属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。

flex-grow：<number>; /* 数值，能够是小数，默认值是0 */
复制代码

flex-grow不支持负值，默认值是0，表示不占用剩余的空白间隙扩展本身的宽度。若是flex-grow 大于0，则flex容器剩余空间的分配就会发生变化，具体规则以下：

  • 全部剩余空间总量是1。
  • 若是只有一个flex子项设置了flex-grow属性值：
    • 若是 flex-grow值小于1，则扩展的看空间就总剩余空间和这个比例的计算值。
    • 若是flex-grow值大于1，则独享全部剩余空间。
  • 若是有多个flex设置了flex-grow属性值：
    • 若是flex-grow值总和小于1，则每一个子项扩展的空间就总剩余空间和当前元素设置的flex-grow比例的计算值。
    • 若是flex-grow值总和大于1，则全部剩余空间被利用，分配比例就是flex-grow属性值的比例。 例如全部flex子项都设置flex-grow:1,则表示剩余空白间隙你们等分 ，若是设置的flex-grow比例是1：2：1，则中间的flex子项占据一半的空白间隙，剩余的先后两个元素等分。

flex属性是 flex-grow, flex-shrink和 flex-basis的缩写。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
复制代码

其中第2和第3个参数是能够选的，默认值为0 1 auto。

十一.column-count实现三列布局

通常用于在线文档

column-count: 3;
复制代码

十二.修改全站字体

html[lang=en-RU] body *{
  @import url('http://fonts.googleapis.com/css?family=Roboto:400,700');
  font-family: 'Roboto' !important;
}
复制代码

十三.px

在不一样的屏幕上，css像素所呈现的物理尺寸是一致的，而不一样的是css像素所对应的物理像素数是不一致的。在普通屏幕下1个css像素对应1个物理像素，而在Retina屏幕下，1个像素对应的倒是4个物理像素。

CSS像素

css像素是一个抽象的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。通常状况之下，css像素称为与设备无关的像素（device-indpendent pixel）,简称DIPs.

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量，它一般以每英寸有多少个像素来计算（PPI）

物理像素

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每一个像素能够根据操做系统设置本身的颜色和亮度。正是这些设备像素的微小距离欺骗了咱们肉眼看到的图像效果。

推荐一篇文章：再谈Retina下1px的解决方案

十四. 媒体查询

1.什么是媒体查询

媒体查询可让咱们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向：横向或纵向)为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，能够在不改变页面内容的状况下，为特定的一些输出设备定制显示效果。
复制代码
  1. 逻辑操做符

not and only

  1. 在html中写入media
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
复制代码

参数详解：

  • width=device-width: 宽度等于当前设备的宽度
  • initial-scale=1: 初始的缩放比例 （默认为1）
  • minimum-scale=1: 容许用户缩放到的最小比例（默认为1）
  • maximun-scale=1: 容许用户缩放到的最大比例 （默认为1）
  • user-scalable=no: 用户是否能够手动缩放（默认为no)
  1. 写Media中的代码
/* 当页面大于1200px时，大屏幕，主要是PC端 */
@media (min-width: 1200px) {
    
}
/* 在992 和 1199像素之间的屏幕里，中等屏幕，分辨率低的pc */
@media (min-width: 992px) and (max-width: 1199px) {
    
}
/* 在768 和 991 像素之间的屏幕里，小屏幕，主要是PAD */
@media (min-width: 768px) and (max-width: 991px) {
    
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {

}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
    
}
复制代码

十5、box-shadow

/* x偏移量 | y偏移量 | 阴影模糊半径 |阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0,0,0, 0.2);
任意数量的阴影，以逗号分隔
复制代码

模糊距离和扩散半径的区别：

相同点： 都会产生额外长度区域。

不一样点： 模糊距离产生的额外长度带有模糊效果。

十6、scss中的@mixin与@function

scss是Sass3引入的新语法，语法彻底兼容CSS3，且继承了Sass的强大功能。全部在CSS中正常工做的代码也能在SCSS中正常工做。

@mixin

// 定义
@mixin rounded($amount) {
    -moz-border-radius: $amount;
    border-radius: $amount;
}
// 使用
.box {
    border: 3px solid #777;
    @include rounded(5px);
}
// 结果
.box {
    border: 3px solid #777;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
复制代码

@function

// 定义 pc端2560设计稿
@function v($px) {
    @return round($px * 10000 / 2560) /10000 * 100vw;
}
// 使用
.root {
    width: v(2560);
}
// 结果
.root {
    width: 100vw;
}
复制代码

@mixin 用于被屡次声明的样式。符合DRY原则（Don't Repeat youself）.

@function 相似于声明一个函数，调用后计算返回相应的结果

十7、选择器 ~ 和 + 的区别

相邻兄弟选择器+ 相邻兄弟选择器可选择紧接在另外一个元素后的元素，且两者有相同的父元素。 若是要增长紧接在h1元素后出现的段落上的边距，写法以下：

h1 + p {marign-top: 20px;}
复制代码

这个选择器：选择器紧接在h1元素后出现的段落，h1和p元素拥有共同的父元素。

相同的父元素~ 为全部相同的父元素中位于p元素以后的全部ul元素设置背景：

p~ul {background: #000000;}
复制代码

p~ul 选择器：p以后出现的全部ul；两种选择器必须拥有相同的父元素，可是ul没必要是直接紧随p。

区别： +是必须紧邻的兄弟元素。 ~是元素后边的同级元素，没必要是紧邻的。

两个选择器都必须拥有相同的父元素。

附：选择器大于号 >

大于号表示为子选择器（child selector），限定在第一级子元素中选择第一个子元素

十8、align-items和 align-content的区别

align使成一行

align-items属性适用于全部的flex容器，它是用来设置每一个flex元素在侧轴上的默认对齐方式。align-items属性定义项目在交叉轴上如何对齐。

display: flex;
align-items: flex-start | flex-end | center | stretch | baseline;
复制代码

align-content对单行是没有效果的，此属性只适用于多行的flex容器，而且当侧轴上有多余空间使用flex线对齐。align-content属性定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。

align-content: space-between | flex-start | flex-end | center | space-around | stretch;
复制代码

align-items和align-content有相同的功能，不一样点是它是用来让每个单行的容器居中而不是让整个容器居中。

十9、box-sizing的有效值以及所对应的盒模型规则

盒模型是css的基石之一。页面上的每个元素都被看作一个矩形框，这个框由元素的内容、内边距、边框、外边距组成。

外边距是透明的，通常使用它来控制元素之间的间隔。

box-sizing属性能够定义要使用哪一种盒模型。

box-sizing: content-box | border-box;

content-box: width = 内容的宽度；height = 内容的高度；宽度和高度的计算值都不包含内容的边框（border）和内边距（padding），是默认值，标准盒子模型。 若是你设置一个元素的宽为100px，那么这个元素的内容区还有100px宽，而且任何边框和内边距的宽度都会被增长到最后绘制出来的元素的宽度中。

border-box: width 和 height 属性包括内容，内边距和边框，可是不包括外边距。属于IE盒模型。 尺寸的计算公式： width = border + padding + 内容的宽度; height = border + padding + 内容的高度;

二十. img标签的默认间隙问题

问题：这个是浏览器的一个设计问题

1.上下间距问题
2.左右间距问题
3.四周间距问题

1.上下间距问题
1.1 对img加上 vertical-align: top 或者 vertical-align: bottom 属性，但此属性只能解决图片产生的上下默认边距问题。
img {
    vertical-align: top; // 或 vertical-align: bottom;
}
1.2 对父元素 div 加上 line-height: 0; 属性，但此属性只能解决图片产生的上下默认边距的问题。
div {
    line-height: 0;
}

2.左右间距问题
2.1 产生左右默认间距的问题是因为代码换行问题识别而产生，能够在img代码后加注释进行链接。
2.2 代码不换行（不建议使用）
2.3 float来解决，或者将img ，display：block； 但此时则会出现img换行问题又得继续进行float操做！（如div没设置高度，同时还会此时高度塌陷的问题！高度塌陷能够用其余方式来解决）

3.四周间距问题
3.1 在父元素上加上 font-size ： 0；能同时解决四周所产生的边距问题！（但在父元素下同时存在文本的状况下，这须要单独对文本进行 font-size 声明大小！）

div {
    font-size: 0;
}

3.2 用float来解决
img {
    float: left;
}
复制代码

参考

二十一. 代码实现左边div宽度100px,右边自适应的布局

方法一：float

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
}
.layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    height: 100px;
    background: blue;
    // overflow: auto; 若是左右高度不一致，可用此属性触发BFC
}
</style>
复制代码

效果以下：

方法二：flex 

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
    display: flex;
}
.layout .left {
    flex: none; // flex-grow: 0; flex-shrink: 0; flex-basis: auto;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    height: 100px;
    background: blue;
    flex: 1;
}
</style>
复制代码

效果以下：

方法三：table

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
    display: table;
}
.layout .left {
    display: table-cell;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    display: table-cell;
    height: 100px;
    background: blue;
}
</style>
复制代码

方法四：css计算宽度

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
}
.layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    float: right;
    height: 100px;
    background: blue;
    width: calc(100% - 100px)
}
</style>
复制代码

二十一. margin的auto的真正含义

auto 能够理解为自动、自适应的概念

margin: 0 auto;
就是上下边距为0，左右变为为auto，就是自动适应。

margin-left: auto;
就是左侧自适应，若是右侧为0，则会居右。和float: right;效果相同。

复制代码
  1. margin同级元素之间应用

margin在水平方向的值不会合并，竖直方向的边距会合并（等于外边距中较大的一个）。

另： 当一个元素同时设置了 margin-top 和 margin-bottom,可是内容为空，那么这两个margin值也会叠加，值为二者最大的一个，它相似与竖直方向上两个盒子margin值的叠加。

  1. margin在父元素和子元素之间的应用

2.1 在子元素中设置水平方向的margin值，margin-left、margin-right。 在子元素中设置margin-left，其值其实是子元素的左边框距离父元素左padding内侧的距离。

2.2 在子元素中设置竖直方向的margin值，咱们但愿子元素的上部距离父元素的上部为100px，但是咱们看到的倒是父元素的上部距离浏览器页面的上部有100px的距离，这是为何呢？哪里出现问题了呢？实际上这是由于当父元素没有设置padding值以及border值时，出现了一个bug--父元素的上方与子元素的上方彻底重合在了一块儿，没法分开。因此才会致使上述这种父元素和子元素同时向下的状况。

对于这种问题解决方法有下面几种：

  • 方法一：给父元素添加padding-top值;
  • 方法二：给父元素添加border值;
  • 方法三：给父元素添加属性overflow:hidden;
  • 方法四：给父元素或者子元素声明浮动float;
  • 方法五：使父元素或子元素声明为绝对定位：position:absolute;
  • 方法六：给父元素添加属性 overflow:auto; positon:relative;
  1. margin值的单位为%

3.1 若是margin值是以%为单位，实际上这个时候百分比（%）是相对于该元素的父元素（容器）的宽度，相对于同级元素和父子元素都是如此。 同级元素之间在竖直方向上使用margin，当值的单位为%时，也是相对于父元素的宽度。

3.2 父子元素使用值为%的margin。对于父子元素，若是在子元素中使用单位为% margin，那么这个marign值是相对于父元素的宽度和高度。 例如我设置了margin-left的值为20%，margin-top的值为20%，父元素的width为500px,父元素的height为300px.此时margin-left和margin-top都为100px，所以子元素的marign-top值最终一样是相对于父元素的宽度而非高度。

参考

二十二. em

.div {
    font-size: 1.2em;
    line-height: 1.5em;
}
// 若父元素字体大小为10px，则div的字体大小为12px，行高为18px,以当前元素的 font-size 为准。
复制代码

font简写规则 font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: normal; font-stretch: normal; font-size: 2em; line-height: 2em; font-family: Arial;

<div style="font-size: 10px">
  <p style="font: 2em/2em Arial">测试</p>
</div>
// p标签的font-size为20px，line-height为40px；
复制代码

font: 2em/2em Arial等同于
font-size: 2em;
line-height: 2em;
font-family: Arial;

  1. line-height与font-size存在什么关系

line-height若是为em或1.2等则继承自身font-size，1.5em则为字体大小的1.5倍

  1. line-height与所属元素的height有什么关系

height为元素的高度，line-height为内部字体的行高

二十3、自定义滚动条

webkit内核浏览器自定义滚动条样式

以垂直方向的滚动条为例：

overflow-y: scroll;
整个滚动条
::-webkit-scrollbar {
    width: 5px;
}

滚动条的轨道
::-webkit-scrollbar-track {
    background-color: #ffa336;
    border-radius: 5px;
}

滚动条的滑块
::-webkit-scorllbar-thumb {
    background-color: #ffc076;
    border-radius: 5px;
}

复制代码

作出的滚动条以下：

IE浏览器自定义滚动条样式

IE的滚动条能够自定义的样式相比较来讲就少了许多，只能控制各个部分显示的颜色，定制性比较低。

滚动条三角箭头的颜色: scrollbar-arrow-color

滚动条上滚动滑块颜色: scrollbar-face-color

滚动条轨道、按钮背景的颜色: scrollbar-track-color

滚动框上滑块边框的颜色: scrollbar-shadow-color

符： 控制滚动条的显示和隐藏

上面咱们提到，设置y轴的滚动条，能够用如下的属性。

overflow-y: scroll;
复制代码

可是问题来了，若是高度没有超过必定的限制，好比当高度超过200px时显示滚动条，当高度小于200px时隐藏滚动条，此时该怎么作呢？你是否是想到了用js来控制？jquery演示以下：

// 判断滚动条是否展现
  function scrollHide () {
    if ($('ul>li').length < 3) {
      $('ul').css('overflow-y','hidden')
    }
  }
复制代码

你觉得上面的方法就解决了问题，可是...

overflow-y: auto;
复制代码

只须要把overflow-y: scroll;变为overflow-y: auto;就解决了上面的问题...你还在用js来控制吗？

二十4、checkbox妙用

checkbox用的好，js代码确定少。 今天有这样一个需求，点击右侧的箭头（至于箭头是怎么用css实现的，本身google），展现所有的文字，屡次点击能够来回切换。原本觉得用几行js实现如下这个效果就能够了。细细一想，以为有点low，仍是用css来实现吧。

第一步：DOM结构

<div class="model">
  <input class="arrow" type="checkbox" value="" />
  <p class="model-text">
    孔子曰："诗三百，思无邪。不学诗，无以言"，诗三百指的就是中国古代第一部诗歌总集《诗经》。
    《诗经》最初称《诗》，汉武帝始称《诗经》，收集了自西周初年到春秋中期各地的诗歌，诗的做者
    已无考，传由尹吉普采集，孔子编选。《诗经》共计311首诗，分为风雅颂三部分，其中6篇为笙诗。
  </p>
</div>
复制代码

第二部：SCSS

.model {
    width: 462px;
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    .model-text {
      width: 440px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      order: -1;
    }
    .arrow {
      margin-top: 4px;
      width: 0;
      height: 0;
      border-top: 12px solid #999999;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid transparent;
      cursor: pointer;
      -webkit-appearance: none;
      outline: none;
      transition: 0.2s all ease-in-out;
      transform: rotate(0);
      transform-origin: 9px 6px;

      &:checked {
        transform: rotate(180deg);
        & + .model-text {
          display: inherit;
        }
      }
    }
  }
复制代码

这样，在没有js的状况下就实现了点击箭头来隐藏和展现文字的效果。

总结：

  1. input标签要写在p标签的前边，方便在css中使用+ 号选择器，表明紧邻在input标签后的全部p标签。
  2. 在使用flex的时候，p标签要使用 order: -1;(order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。)或者使用 flex-direction: row-reverse;(row-reverse：主轴为水平方向，起点在右端。)

二十5、让 HTML 识别 string 里的 '\n' 并换行

html 识别不了 '\n',只要一行代码就能够达到这种效果了：

white-space: pre-line;
复制代码

二十6、径向渐变radial-gradient

实现代码

background: radial-gradient(circle at left center, transparent 4px, #ff5353 0) top left/51% 100% no-repeat, radial-gradient(circle at right center, transparent 4px, #ff5353 0) top right/51% 100% no-repeat;
复制代码

<position>、 <shape>、 <size>、 <color-stop> 其参数：<position>、 <size>、 <color-stop>对应为circle at left center、transparent 4px、#ff5353 0,含义为左侧的圆形，为4px的透明色，其他地方的颜色为#ff5353

span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 4px;
  background:
    radial-gradient(circle at left  center, transparent 4px, #ff5353 0) top left/51% 100% no-repeat,
    radial-gradient(circle at right center, transparent 4px, #ff5353 0) top right/51% 100% no-repeat;
}
复制代码

解析：

  • 1.border-radius: 4px将span标签造成4px的圆角。
  • 2.咱们指定的形状是一个圆形circle，形状不受外部容器尺寸影响。将整个span铺满。circle at left center圆心的位置在左侧和垂直方向中心的位置。
  • 3.transparent 4px圆心为4px的透明色。
  • 4.#ff5353为外层的色值,渐变为 0，即没有过分颜色，不会从transparent过分到#ff5353,而是直接显示#ff5353。

参考：www.zhangxinxu.com/wordpress/2…

developer.mozilla.org/zh-CN/docs/…

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程