下麵是總結的css技巧，建議大家收藏，以後用的時候就不用到處查資料了。當然這些也不是所有的，大家如果有什麼好的css有趣樣式技巧也可以發出來哦 三角形 最常見的一種形狀了。切圖，不存在的。 /** 正三角 */ .triangle { width: 0; height: 0; border-styl ...
三角形
最常見的一種形狀了。切圖，不存在的。
/** 正三角 */ .triangle { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; } /** 倒三角 */ .triangle { width: 0; height: 0; border-style: solid; border-width: 40px 25px 0 25px; border-color: rgb(245, 129, 127) transparent transparent transparent; }
虛線效果
.dotted-line{ border: 1px dashed transparent; background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em); }
css自帶的border-style屬性 dotted/ dashed . 效果展示出來太密了，並不符合UI設計
具體的虛線的顏色和間距都可以通過repeating-linear-gradient生成的條紋背景去調整。
文本超出省略號
單行文本
.single-ellipsis{ width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
多行文本
.multiline-ellipsis { display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 4; //需要顯示的行數 overflow: hidden; text-overflow: ellipsis; }
擴展: -webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。
為了實現該效果，它需要組合其他外來的WebKit屬性。常見結合屬性：
-
display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
-
-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
-
text-overflow，可以用來多行文本的情況下，用省略號“...”隱藏超出範圍的文本 。
瀏覽器相容性：
時間軸
html結構
<div class="timeline-content"> <div v-for='(item, index) in timeLine' :key='index' class="time-line"> <div :class="`state-${item.state} state-icon`"></div> <div class="timeline-title">{{item.title}}</div> </div> </div>
css樣式
/** 時間軸 */ .timeline-content{ display: flex; .time-line{ padding: 10px 10px 10px 20px; position: relative; &::before{ content: ''; height: 1px; width: calc(100% - 34px); background: #EBEBEB; position: absolute; left: 24px; top: 0; } } .state-icon{ width: 20px; height: 20px; position: absolute; top: -12px; left: 0; } .state-1{ background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-6bei-fen_1589266208621.png') no-repeat; background-size: cover; } .state-2{ background: url('https://static.daojia.com/assets/project/tosimple-pic/12_1589266226040.png') no-repeat; background-size: cover; } .state-3{ background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-3_1589266140087.png') no-repeat; background-size: cover; } }
calc()函數 用來計算css屬性的值。
用法：
/** 屬性：calc（expression）*/ 寬度：calc（100％ - 34px）;
除了減法，還可以用 +（加） ，/(除) ， *（乘）。但要註意的是：
註意： +和-運算符在運算符和值之間需要一個空格。例如，它將被calc(50% -8px)解釋為百分比，後跟負像素長度。只有在-到8px之間有空格時，才可以正確減法：calc(50% - 8px) 空格在乘法或除法中不起作用，但建議閱讀時要註意。
瀏覽器相容性：
滾動條
.scroll-container { height: 250px; border: 1px solid #ddd; padding: 15px; overflow: auto; .row { margin: 0; line-height: 1.5; } &::-webkit-scrollbar { width: 8px; background: white; } &::-webkit-scrollbar-corner, /* 滾動條角落 */ &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track { border-radius: 4px; } &::-webkit-scrollbar-corner, &::-webkit-scrollbar-track { /* 滾動條軌道 */ background-color: rgba(180, 160, 120, 0.1); box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); } &::-webkit-scrollbar-thumb { /* 滾動條手柄 */ background-color: #00adb5; } }
卡券效果
.coupon{ width: 300px; height: 100px; 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)); }
陰影效果
// 三角形陰影 .shadow-triangle{ width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent rgb(245, 129, 127) transparent; filter:drop-shadow(10px 0px 10px rgba(238, 125, 55,0.5)); } // 缺圓投影 .circle-square{ width:100px; height:50px; line-height: 50px; background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px); filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9)); } // 氣泡陰影 .tip { width: 100px; height: 30px; line-height: 30px; border: 1px solid rgb(245, 129, 127); border-radius: 4px; position: relative; background-color: #fff; filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9)); &::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #fff transparent; position: absolute; top: -10px; left: 0; right: 0; margin: auto; z-index: 2; } &::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent rgb(245, 129, 127) transparent; position: absolute; top: -11px; left: 0; right: 0; margin: auto; z-index: 1; } }
等高佈局
沒有什麼是一個flex搞不定的。
.parent{ display: flex; }
如果一行放不下，可以折行。
.parent{ flex-wrap: wrap; }
總結
上面是一些靜態的樣式，還有一些更好玩的動態樣式，希望有機會與大家分享~ 如果你有更多css的有趣技巧，歡迎在評論區留言哦~
對了，小編為大家準備了一套2020最新的web前端資料，需要點擊下方鏈接獲取方式
