CSS/CSS3常用Style

1、实现以下功能：
这里写图片描述

代码附上：

width: 5px;
height: 35px;
border: 84px solid;
border-color: #ffa002 transparent transparent transparent;

2、如何实现“颜色渐变”这种功能效果图，如下图：

这里写图片描述
代码附上：

background: -webkit-linear-gradient(left, #67d41f 24%, #FFFFFF 1%,#FFFFFF 24.5%, #d2d2d2 1% ,#d2d2d2 50%,#FFFFFF 1%,#FFFFFF 50.8%,#D2D2D1 1%,#D2D2D1 75%,#ffffff 1%,#ffffff 75.6%,#d2d2d2 1%,#d2d2d2 99%);

3、在标题文字后面加图片

如图所示，在ul li 的末尾处加入向右的箭头
这里写图片描述

//只需在li标签上加入一个css即可：
background: #FFFFFF url(../../img/right-jia.png) center right 18px no-repeat;

4、改变背景颜色

（1）上下分开

background: linear-gradient(to bottom, #ffea78 0px, #FFFFFF 100%)repeat-x scroll 0 0 rgba(0, 0, 0, 0);

这里写图片描述

（2）左右分开

background:linear-gradient(to left, red 100px, yellow 200px);

这里写图片描述
（3）左上角渐变

background-image:linear-gradient(to left top, red 100px, yellow 200px);

这里写图片描述

5、文本过长，不换行用省略号显示

.ellipsis {/**文本过长，不换行用省略号显示*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;-icab-text-overflow: ellipsis;-khtml-text-overflow: ellipsis;-moz-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;
}.ellipsis1 {/**多行文本过长，用省略号显示*/width: 200px;word-break: break-all;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;
}.ellipsis2 {/**多行文本过长，用省略号显示*/width: 200px;word-break: break-all;display: -webkit-box;-webkit-line-clamp: 2;//显示的第几行加省略号-webkit-box-orient: vertical;overflow: hidden;
}

效果图附上：
这里写图片描述
demo 附上：

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height = device-height, initial-scale=0,maximum-scale = 2.0,minimum-scale = 1.0,user-scalable = no"><title>省略号</title><style>.text1 {width: 200px;overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;-moz-text-overflow: ellipsis;white-space: nowrap;}.text2 {width: 200px;word-break: break-all;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}</style></head><body><div class="text1">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div><br /><div class="text2">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div></body></html>

6、两端对齐

text-align:justity;
text-justify:inter-ideogra;

7、文字换行

white-space:nowrap;/*强制不换行*/
word-wrap：normal;/*只在允许的断字点换行（浏览器保持默认处理）*/
word-wrap: break-word;/*在长单词或URL地址内部进行换行。*/
word-break: normal;/*强制英文单词断行*/
word-break:break-all;/*允许在单词内换行*/

8、禁用鼠标Style

cursor:not-allowed;

一、`display : flex` 布局

1、效果1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=0"><title>布局</title><style>body {margin: 0 auto;}.list {display: -webkit-flex;flex-flow: row wrap;-webkit-flex-flow: row wrap;align-items: stretch;-webkit-align-items: stretch;justify-content:center;-webkit-justify-content: center;/** flex-flow的参数介绍row    ---横向（左向右）column ---竖向（上向下）wrap   ---一行显示不完的时候换行*/}.list div {margin: 5px 0px 0px 0px;width: 40%;height: 100px;line-height: 100px;text-align: center;border: 1px solid red;}</style></head><body><div class="list"><div>AAA</div><div>BBB</div><div>CCC</div><div>DDD</div></div></body>
</html>

这里写图片描述
2、效果2

.list {display: -webkit-flex;flex-flow: row;-webkit-flex-flow: row;align-items: stretch;-webkit-align-items: stretch;justify-content:center;-webkit-justify-content: center;
}

这里写图片描述

3、效果3

CSS flex 属性

让所有灵活的项目都带有相同的长度，忽略它们的内容。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><title>布局</title><style>body{margin: 0 auto;}/*flex-flow: row wrap; row横向（左向右）显示 column竖向（上向下）显示 wrap一行显示不完的时候换行*/div{border: 1px solid red;height: 200px;}footer { display: -webkit-flex;-webkit-flex-flow: row;-webkit-align-items: stretch;-webkit-justify-content:space-between;/*IE10还不支持*/display: -ms-flex;-ms-flex-flow: row wrap;-ms-align-items: stretch;-ms-justify-content:space-between;display: flex;flex-flow: row;align-items: stretch;justify-content:space-between;}.col2{-webkit-flex:1;-moz-flex:1;flex:1}</style></head><body><footer><div style="width:80px;">AAA</div><div class="col2">BBB</div><div style="width:40px;">CCC</div></footer> </body>
</html>

这里写图片描述

浏览器支持

除了 Safari，其他所有主流浏览器都支持 flex 属性。

IE 9 及其之前的版本不支持 flex 属性。IE 10 需要前缀 -ms- 才支持该属性。

详情请查阅W3C规范：http://www.runoob.com/cssref/css3-pr-flex.html

二、`display : box` 布局

实现代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title></title><style>body{margin:0 auto;text-align:center}.test_box{width:100%;background:#f0f3f9;margin:0 auto}.test_box .list{width:25%;/*字体：加粗、36px大小，高度80px*/font:700 26px/80px monaco;border:1px solid red}/*关键代码*/.one{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:start;-webkit-box-pack:start;-o-box-pack:start;box-pack:start}.two{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:end;-webkit-box-pack:end;-o-box-pack:end;box-pack:end}.three{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:center;-webkit-box-pack:center;-o-box-pack:center;box-pack:center}.four{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:justify;-webkit-box-pack:justify;-o-box-pack:justify;box-pack:justify}</style></head><body><div class="test_box one"><div class="list">1</div><div class="list">2</div><div class="list">3</div></div><br /><div class="test_box two"><div class="list">4</div><div class="list">5</div><div class="list">6</div></div><br /><div class="test_box three"><div class="list">7</div><div class="list">8</div><div class="list">9</div></div><br /><div class="test_box four"><div class="list">10</div><div class="list">11</div><div class="list">12</div></div></body></html>

如图所示的布局：
这里写图片描述

布局详细介绍，请移步：链接1、链接2

align-items（竖轴上的排列基准）

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

详情请查阅：http://www.webkkl.com/style/align-items.php
http://www.css88.com/book/css/properties/flex/align-items.htm

示例1：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=0"><title>布局</title><style>body {margin: 0 auto;background: #E1EDF7;}.list div{width: 40%;height: 100px;border: 1px solid red;/*关键代码*/display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;/*IOS专用*/}</style></head><body><div class="list"><div><span>AAA</span></div><div><span>BBB</span></div><div><span>CCC</span></div><div class="c5"><span>DDD</span></div></div></body>
</html>

这里写图片描述

示例2：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=0"><title></title><style>.box{display:-webkit-flex;display:flex;width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}.box li:nth-child(1){padding:10px;}.box li:nth-child(2){padding:15px 10px;}.box li:nth-child(3){padding:20px 10px;}#box{-webkit-align-items:flex-start;align-items:flex-start;}#box2{-webkit-align-items:flex-end;align-items:flex-end;}#box3{-webkit-align-items:center;align-items:center;}#box4{-webkit-align-items:baseline;align-items:baseline;}#box5{-webkit-align-items:strecth;align-items:strecth;}</style></head><body><h2>align-items:flex-start</h2><ul id="box" class="box"><li>a</li><li>b</li><li>c</li></ul><h2>align-items:flex-end</h2><ul id="box2" class="box"><li>a</li><li>b</li><li>c</li></ul><h2>align-items:center</h2><ul id="box3" class="box"><li>a</li><li>b</li><li>c</li></ul><h2>align-items:baseline</h2><ul id="box4" class="box"><li>a</li><li>b</li><li>c</li></ul><h2>align-items:strecth</h2><ul id="box5" class="box"><li>a</li><li>b</li><li>c</li></ul></body></html>

这里写图片描述

三、一行 CSS 代码实现整个网站网页变黑白灰的效果（悼念）

html.o2_gray {-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);-webkit-filter:gray;filter:gray;-webkit-filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);filter:progid:dximagetransform.microsoft.basicimage(grayscale=1)
}html.o2_gray img {-webkit-filter:url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.1/fonts/18398cb27130fa104552f4ecd010cdc7.svg#grayscale)!important;filter:url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.1/fonts/18398cb27130fa104552f4ecd010cdc7.svg#grayscale)!important
}

四、动画

效果：ChatGpt 光标闪烁效果：

<style>#app:after {content: " ";background-color: #249c61;letter-spacing: 0.88px;width: 10px;height: 26px;display: block;animation: cursor-blinks 1s infinite steps(1, start);}@keyframes cursor-blinks {0% {opacity: 1;display: block;}50% {opacity: 0;display: none;}100% {opacity: 1;display: block;}}
</style><body><div id="app"></div>
</body>