十幾個 CSS 高階技巧彙總

2021-05-28 10:31:09

作者：前端一零仙人https://blog.csdn.net/weixin_41556756/article/details/114196921

「列舉一下效果」設定input的placeholder的字型樣式單行和多行文字超出省略號負邊距使用技巧定位同時設定方位情況相鄰兄弟選擇器之常用場景outline屬性的妙用技巧隱藏滾動條或更改滾動條樣式純CSS繪製三角形虛線框繪製技巧卡券效果製作隱藏文字的常用兩種方法表格邊框合併「1-1. 設定input 的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;}<inputtype="text" placeholder="請設定使用者名">設定input聚焦時的樣式input:focus { background-color: red;}取消input的邊框border: none;outline: none;<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>CSS高階常見技巧彙總</title><styletype="text/css">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:focus {background-color: red; }input{border: none;outline: none; }</style></head><body><inputtype="text"placeholder="請設定使用者名"></body></html>「1-2. 單行和多行文字超出省略號」// 單行文字出現省略號width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: break-all;// 多行文字出現省略號display: -webkit-box; /*重點，不能用block等其他，將物件作為彈性伸縮盒子模型顯示*/-webkit-box-orient: vertical; /*從上到下垂直排列子元素（設定伸縮盒子的子元素排列方式）*/-webkit-line-clamp: 3; /*行數，超出三行隱藏且多餘的用省略號表示...*/line-clamp: 3;word-break: break-all;overflow: hidden;max-width: 100%;<divclass="container"><pclass="single"><spanclass="c-red">單行溢位：</span>《ECMAScript 6 入門教程》是一本開源的 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性。</p><pclass="mutiple"><spanclass="c-red">多行溢位：</span>《ECMAScript 6 入門教程》是一本開源的 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性。本書覆蓋 ES6 與上一個版本 ES5 的所有不同之處，對涉及的語法知識給予詳細介紹，並給出大量簡潔易懂的示例程式碼。</p></div>/*容器*/.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: 2px5px; }/*單行*/.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%; }img「1-3. 負邊距使用技巧」規律: 左為負時，是左移，右為負時，是左拉。上下與左右類似*{margin:;padding:;}.wrap{/* 利用負值技巧進行整體移動 */margin-left:-6px;}.item{float:left;width: 20%;height: 300px;border-left:6px solid #fff;box-sizing: border-box;}<divclass="wrap"> <divclass="item" style="background-color: red;"></div> <divclass="item" style="background-color: green;"></div> <divclass="item" style="background-color: yellow;"></div> <divclass="item" style="background-color: pink;"></div> <divclass="item" style="background-color: green;"></div></div>img「1-4. 定位同時設定方位情況」規律: 絕對定位和固定定位時，同時設定 left 和 right 等同於隱式地設定寬度span{border:1px solid red;position: absolute;left:;right:;/* 等同於設定 width:100%;display:block */}<span>1</span>「1-5. 相鄰兄弟選擇器之常用場景」ul{width: 500px;margin:auto;list-style: none;padding:;border:1px solid red;text-align: center; }li+li{border-top:1px solid red; }<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>img「1-6. outline屬性的妙用技巧」區別: outline不計算大小 border計算大小* {padding: ;margin: ; }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; }<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>imgimg「1-7. 隱藏滾動條或更改滾動條樣式」.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 1pxrgba(180, 160, 120, 0.5); }.scroll-container::-webkit-scrollbar-thumb {/* 滾動條手柄 */background-color: #00adb5; }<pclass="scroll-container"> 庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章臺的大路。春已至暮，三月的雨伴隨著狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到鞦韆外。庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章臺的大路。春已至暮，三月的雨伴隨著狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到鞦韆外。庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章臺的大路。春已至暮，三月的雨伴隨著狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到鞦韆外。庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章臺的大路。春已至暮，三月的雨伴隨著狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到鞦韆外。</p>img「1-8. 純CSS繪製三角形」/* 正三角 */.up-triangle {width: ;height: ;border-style: solid;border-width: 25px40px25px;border-color: transparent transparent rgb(245, 129, 127) transparent; }/* 倒三角 */.down-triangle {width: ;height: ;border-style: solid;border-width: 40px25px25px;border-color: rgb(245, 129, 127) transparent transparent transparent; }div:last-child {margin-top: 1rem; }img「1-9. 虛線框繪製技巧」.dotted-line {width: 800px;margin: auto;padding: 20px;border: 1px dashed transparent;background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red , #ccc .25em, white , white .75em);}<pclass="dotted-line">庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層img「1-10. 卡券效果製作」.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 ) top right /50%51px no-repeat,radial-gradient(circle at left bottom, transparent 10px, #ffffff ) top left / 50%51px no-repeat,radial-gradient(circle at right top, transparent 10px, #ffffff ) bottom right / 50%51px no-repeat,radial-gradient(circle at left top, transparent 10px, #ffffff ) bottom left / 50%51px no-repeat;filter: drop-shadow(2px2px2px rgba(, , , .2));}.couponspan {display: inline-block;vertical-align: middle;margin-right: 10px;color: red;font-size: 50px;font-weight: 400;}<pclass="coupon"><span>200</span>優惠券</p>img「1-11. 隱藏文字的常用兩種方法」text-indent: -9999px; 或者 font-size: 0;.logo {width: 190px;height: 80px;float: left;margin-top: 8px}.logoh1 {position: relative}.logoh1.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) no-repeat;text-indent: -9999px;}<h1><ahref="#"role="img"class="logo-bd clearfix">淘寶網</a></h1>「1-12. 表格邊框合併」table{border-collapse: collapse;}<tableborder="1"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td></tr><tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td></tr></tbody></table>img合併後img

最後

歡迎關注【懸筆e絕】ヽ(°▽°)ノ

十幾個 CSS 高階技巧彙總

熱門文章