11个css高级常见技巧汇总
目录
文章目录隐藏
1. 设置 input 的 placeholder 的字体样式
HTML 代码
<input type="text" placeholder="请设置用户名">
设置 input 占位符的样式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: red; } input:-moz-placeholder { /* Firefox 18- */ color: red; }
设置 input 聚焦时的样式
input:focus { background-color: red; }
取消 input 的边框
input{ border: none; outline: none; }
效果如下:
2. 单行和多行文本超出省略号
HTML 代码
<div class="container"> <p class="single"> <span class="c-red">单行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程, 全面介绍 ECMAScript 6 新引入的语法特性。 </p> <p class="mutiple"> <span class="c-red">多行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程, 全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处, 对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。 </p> </div>
CSS 代码
/*容器*/ .container { width: 300px; height: 200px; margin: 100px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555; } .c-red { color: red; } p { background-color: rgba(189, 227, 255, 0.28); padding: 2px 5px; } /*单行*/ .single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } /*多行*/ .mutiple { display: -webkit-box; /*重点,不能用 block 等其他,将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/ -webkit-line-clamp: 3; /*行数,超出三行隐藏且多余的用省略号表示...*/ line-clamp: 3; word-break: break-all; overflow: hidden; max-width: 100%; }
3. 负边距使用技巧
规律: 左为负时,是左移,右为负时,是左拉。上下与左右类似
HTML 代码
<div class="wrap"> <div class="item" style="background-color: red;"></div> <div class="item" style="background-color: green;"></div> <div class="item" style="background-color: yellow;"></div> <div class="item" style="background-color: pink;"></div> <div class="item" style="background-color: green;"></div> </div>
CSS 代码
* { margin: 0; padding: 0; } .wrap { /* 利用负值技巧进行整体移动 */ margin-left: -6px; } .item { float: left; width: 20%; height: 300px; border-left: 6px solid #fff; box-sizing: border-box; }
4. 定位同时设置方位情况
规律: 绝对定位和固定定位时,同时设置 left 和 right 等同于隐式地设置宽度
HTML 代码
<span>1</span>
CSS 代码
span { border: 1px solid red; position: absolute; left: 0; right: 0; /* 等同于设置 width:100%;display:block */ }
5. 相邻兄弟选择器之常用场景
HTML 代码
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
CSS 代码
ul { width: 500px; margin: auto; list-style: none; padding: 0; border: 1px solid red; text-align: center; } li+li { border-top: 1px solid red; }
效果如下:
6. outline 属性的妙用技巧
区别: outline 不计算大小 border 计算大小
HTML 代码
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
CSS 代码
* { padding: 0; margin: 0; } ul { list-style: none; width: 600px; margin: auto; } li { padding: 10px; border: 10px solid pink; outline-offset: -10px; } li+li { margin-top: -10px; } li:hover { /* border:10px solid gold; */ outline: 10px solid gold; }
效果如下:
7. 隐藏滚动条或更改滚动条样式
HTML 代码
<p class="scroll-container"> 庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。 </p>
CSS 代码
.scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /*必须*/ } .scroll-container::-webkit-scrollbar { width: 8px; background: white; } .scroll-container::-webkit-scrollbar-corner, /* 滚动条角落 */ .scroll-container::-webkit-scrollbar-thumb, .scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/ border-radius: 4px; } .scroll-container::-webkit-scrollbar-corner, .scroll-container::-webkit-scrollbar-track { /* 滚动条轨道 */ background-color: rgba(180, 160, 120, 0.1); box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); } .scroll-container::-webkit-scrollbar-thumb { /* 滚动条手柄 */ background-color: #00adb5; }
效果如下:
相关文章推荐阅读:
《纯 css 美化滚动条样式 -webkit-scrollbar》
8. 纯 CSS 绘制三角形
/* 正三角 */ .up-triangle { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; } /* 倒三角 */ .down-triangle { width: 0; height: 0; border-style: solid; border-width: 40px 25px 0 25px; border-color: rgb(245, 129, 127) transparent transparent transparent; } div:last-child { margin-top: 1rem; }
其他 css 形状图形绘制方法请看《css 优雅的画出形状图形》
9. 虚线框绘制技巧
HTML 代码
<p class="dotted-line">庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。</p>
CSS 代码
.dotted-line { width: 800px; margin: auto; padding: 20px; border: 1px dashed transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em); }
效果如下:
相关知识推荐阅读《css 蚂蚁行军边框效果》
10. 卡券效果制作
HTML 代码
<p class="coupon"> <span>200</span>优惠券 </p>
CSS 代码
.coupon { width: 300px; height: 100px; line-height: 100px; margin: 50px auto; text-align: center; position: relative; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2)); } .coupon span { display: inline-block; vertical-align: middle; margin-right: 10px; color: red; font-size: 50px; font-weight: 400; }
效果如下:
11. 隐藏文本的常用两种方法
text-indent: -9999px; 或者 font-size: 0;
HTML 代码
<h1> <a href="#" role="img" class="logo-bd clearfix">淘宝网</a> </h1>
CSS 代码
.logo { width: 190px; height: 80px; float: left; margin-top: 8px } .logo h1 { position: relative } .logo h1 .logo-bd { display: block; margin-left: 22px; padding-top: 58px; width: 142px; overflow: hidden; background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat; text-indent: -9999px; }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 11个css高级常见技巧汇总
码云笔记 » 11个css高级常见技巧汇总