Chi tiền bất cửu, do vu tự kỷ bình thời thiệp liệp hoàn toán quảng phiếm, tổng kết liễu nhất thiên bác khách:Giá ta JavaScript biên trình hắc khoa kỹ, trang bức chỉ nam, cao bức cách đại mã, nhượng nhĩ kinh thán bất dĩ,Một tưởng đáo thụ đáo liễu đại gia đích hoan nghênh, hữu nhân hi vọng năng bác chủ hoàn năng chỉnh lý cáCSSĐích nhất ta hắc ma pháp tiểu kỹ xảo, vô nại ngãCSSNhất trực ngận tra, một thập ma càn hóa, tối cận tả liễu nhất cáChromeSáp kiệnGayHub,Toán thị bảGitHubĐích dạng thức thẩm tra liễu cá biến, tại tả đích quá trình trung, dã thu hoạch liễu ngận đa quan vuCSSĐích tiểu kỹ xảo, vưu kỳ thị khai thủy đích đệ nhất cá kỹ xảo, học tập đáo liễu ngận đa, vu thị tái gia thượng nhất ba sưu tập, tựu đản sinh giá thiên bác văn, hoan nghênh bổ sung ~~~😂.

1, lợi dụngCSSĐíchcontentChúc tínhattrTrảo thủ tư liêu

Nhu cầu

Thử tiêu huyền phù thật hiện nhất cá đề kỳ đích văn tự, loại tự github đích giá chủng, như đồ:

Tưởng tất đại gia đô tưởng đáo liễu ngụy nguyên tốafter,Đãn thị văn tự chẩm ma hoạch đắc ni, hựu bất năng dụngJavaScript.

CSSĐích ngụy nguyên tố thị cá ngận cường đại đích đông tây, ngã môn khả dĩ lợi dụng tha tố ngận đa vận dụng, thông thường vi liễu tố nhất ta hiệu quả,content: ""Đa bán hội lưu không, đãn kỳ thật khả dĩ tại lí diện tả thượngattrTrảo tư liêu nga!

<divdata-msg= "Open this file in Github Desktop">
hover
</div>

div{
width:100px;
border:1pxsolid red;
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size:12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1pxsolid green;
}

TạiattrLí diện tắc nhập ngã môn tạihtmlTân tăng đíchdata-msgChúc tính, giá dạng ngụy nguyên tố(:after)Tựu hội đắc đáo cai trị.

Tối chung hiệu quả

Đồng dạng đích, nhĩ hoàn khả dĩ kết hợp kỳ tha cường đại đích tuyển trạch khí sử dụng, lệ như:Sử dụng chúc tính tuyển trạch khí tuyển trạch không liên tiếp

Hiển kỳ một hữu văn bổn trị đãn thịhrefChúc tính cụ hữu liên tiếp đíchaNguyên tố đích liên tiếp:

a[href^="http"]:empty::before{
content:attr(href);
}

Giá dạng tố ngận phương tiện.

2, lợi dụng dụng:validHòa:invalidLai tố biểu đan tức thời giáo nghiệm

Nhu cầu

Nhượng biểu đan kiểm nghiệm biến đắc giản đan ưu nhã, bất nhu yếu tả nhũng trường đích JS đại mã lai giáo nghiệm thiết trí dạng thức

html5Phong phú liễu biểu đan nguyên tố, đề cung liễu loại tựrequired,email,telĐẳng biểu đan nguyên tố chúc tính. Đồng dạng đích, ngã môn khả dĩ lợi dụng:validHòa:invalidLai tố châm đối html5 biểu đan chúc tính đích giáo nghiệm.

• :requiredNgụy loại chỉ định cụ hữu required chúc tính đích biểu đan nguyên tố
• :validNgụy loại chỉ định nhất cá thông quá thất phối chính xác đích sở yếu cầu đích biểu đan nguyên tố
• :invalidNgụy loại chỉ định nhất cá bất thất phối chỉ định yếu cầu đích biểu đan nguyên tố

Đại mã

<divclass= "container">
<divclass= "row"style= "margin-top: 2rem;">
<form>
<divclass= "form-group">
<label>name</label>
<inputtype= "text"requiredplaceholder= "Thỉnh thâu nhập danh xưng">
</div>
<divclass= "form-group">
<label>email</label>
<inputtype= "email"requiredplaceholder= "Thỉnh thâu nhập bưu tương">
</div>
<divclass= "form-group">
<label>homepage</label>
<inputtype= "url"placeholder= "Thỉnh thâu nhập bác khách url">
</div>
<divclass= "form-group">
<label>Comments</label>
<textarearequired></textarea>
</div>
</form>
</div>
</div>

.valid{
border-color:#429032;
box-shadow:inset5px00#429032;
}

.invalid{
border-color:#D61D1D;
box-shadow:inset5px00#D61D1D;
}

.form-group{
width:32rem;
padding:1rem;
border:1pxsolid transparent;
&:hover{
border-color:#eee;
transition:border.2s;
}
label{
display:block;
font-weight:normal;
}
input,
textarea{
display:block;
width:100%;
line-height:2rem;
padding:.5rem.5rem.5rem1rem;
border:1pxsolid#ccc;
outline:none;
&:valid{
@extend.valid;
}
&:invalid{
@extend.invalid;
}
}
}

Canh đa ngụy nguyên tố kỹ xảo khả dĩ tham khán giá thiên văn chương:Nhĩ bất tri đạo đích CSS

Tối chung hiệu quả

3, lợi dụngnth-of-typeTuyển trạch mỗ phạm vi nội đích tử nguyên tố

Nhu cầu

table biểu cách hồng lục tương gian, hiển kỳ đích canh gia trực quan

Đại mã

<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</tbody>
</table>

tbodytr:nth-of-type(2n){
background-color:red;
}

tbodytr:nth-of-type(2n+1){
background-color:green;
}

Tối chung hiệu quả

Nhĩ dã giá dạng lai tố, tuyển trạch 5-10 đích tử nguyên tố.

tabletr:nth-child(n+5):nth-child(-n+10) {
background-color:red;
}

4, nhượng văn tự tượng cổ thi nhất dạng thụ trứ trình hiện

Nhu cầu

Hữu thời hầu, nhu yếu dung khí đích văn tự tòng thượng đáo hạ bài liệt, nhi bất thị tòng tả vãng hữu bài liệt, như đồ sở kỳ:

Giá thịsegmentfaultĐích hồi đáo đỉnh bộ, tha đích thật hiện ngận giản đan, tựu thị thiết trí nhất định khoan độ nhượng kỳ chiết hành, như quả ngã yếu thật hiện giá chủng nhu cầu ni?

Đại mã

writing-modeGiá cáCSSChúc tính, ngã môn thị bất thị ngận thiếu kiến đáo, ngận thiếu dụng đáo! Ngã môn vãng vãng xưng bất thường kiến đích đông tây vi “Sinh tích”, tựu tượng thị bất thường kiến đích văn tự ngã môn khiếu “Sinh tích tự”, nhân thử bất thường kiến đíchCSSChúc tính, ngã môn khả dĩ khiếu tố “Sinh tích chúc tính”,writing-modeCấp ngã môn đích cảm giác tựu thị nhất cá “Sinh tích chúc tính”, ngận nhược, khả hữu khả vô. Giá cá chúc tính khả dĩ truy tố đáoIE 5.5Thời đại, kiêm dung tính thị tương đương hảo đích.

<h4>Vịnh liễu</h4>
<p>Bích ngọc trang thành nhất thụ cao,<br>Vạn điều thùy hạ lục ti thao.<br>Bất tri tế diệp thùy tài xuất,<br>Nhị nguyệt xuân phong tự tiễn đao.</p>

<divclass= "verticle-mode">
<h4>Vịnh liễu</h4>
<p>Bích ngọc trang thành nhất thụ cao,<br>Vạn điều thùy hạ lục ti thao.<br>Bất tri tế diệp thùy tài xuất,<br>Nhị nguyệt xuân phong tự tiễn đao.</p>

.verticle-mode{
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
}
/* IE7 bỉ giác nhược, nhu yếu tố điểm ngạch ngoại đích động tác */
.verticle-mode{
*width:120px;
}
.verticle-modeh4,
.verticle-modep{
*display:inline;
*writing-mode:tb-rl;
}
.verticle-modeh4{
*float:right;
}

Tối chung hiệu quả

Canh đa tế tiết dữ thảo luận thỉnh di bộ trương hâm húc lão sư đích giá thiên văn chương:Cải biến CSS thế giới túng hoành quy tắc đích writing-mode chúc tính

5, thật hiện thử tiêu huyền phù nội dung tự động xanh khai đích quá độ động họa

Nhu cầu

Nhu yếu vi nhất cá liệt biểu thiêm gia cá động họa, dung khí đích cao độ thị bất xác định đích, dã tựu thị cao độ viauto,Huyền phù thời hầu xanh khai nội dung hữu cá quá độ động họa

Như hạ đồ sở kỳ:

Nhi dụngCSS3Thật hiện đích thoại, do vu cao độ đích bất xác định, nhitranstionThị nhu yếu cụ thể đích thụ chi, sở dĩ thiết tríheight:autoThị vô pháp thật hiện hiệu quả đích, khả dĩ thông quámax-heightGiá cá chúc tính gian tiếp đích thật hiện giá ma cá hiệu quả,cssDạng thức thị giá dạng đích:

Đại mã

<ul>
<li>
<divclass= "hd">Liệt biểu 1</div>
<divclass= "bd">Liệt biểu nội dung<br>Nội dung liệt biểu nội dung<br>Nội dung liệt biểu nội dung<br>Nội dung</div>
</li>
<li>
<divclass= "hd">Liệt biểu 1</div>
<divclass= "bd">Liệt biểu nội dung<br>Nội dung liệt biểu nội dung<br>Nội dung liệt biểu nội dung<br>Nội dung</div>
</li>
<li>
<divclass= "hd">Liệt biểu 1</div>
<divclass= "bd">Liệt biểu nội dung<br>Nội dung liệt biểu nội dung<br>Nội dung liệt biểu nội dung<br>Nội dung</div>
</li>
</ul>

.bd{
max-height:0;
overflow:hidden;
transition:all1sease-out;
}
li:hover.bd{
max-height:600px;
transition-timing-function:ease-in;
}

Tối chung hiệu quả

Cân tiền diệnGIFSoa bất đa, giá lí tựu bất lụcGIFLiễu, hữu hưng thú đích khả dĩ tự kỷ thường thí cảm thụ nhất hạ

6, lợi dụngpointer-eventsCấm dụngaTiêu thiêm sự kiện hiệu quả

Nhu cầu:

Tại tốtabThiết hoán đích thời hầu, đương tuyển trung đương tiền hạng, cấm dụng đương tiền tiêu thiêm đích sự kiện, chỉ hữu thiết hoán kỳ thatabĐích thời hầu, tài trọng tân thỉnh cầu tân đích sổ cư.

pointer-eventsThị nhất cá dụng vuHTMLChỉ châm sự kiện đích chúc tính.

pointer-eventsKhả dĩ cấm dụngHTMLNguyên tố đíchhover/focus/activeĐẳng động thái hiệu quả.

Mặc nhận trị viauto,Ngữ pháp:pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;

Đại mã

<ul>
<li>
<aclass= "tab"href= "https://google.com">aaa</a>
</li>
<li>
<aclass= "tab active"href= "https://facebook.com">bbb</a>
</li>
<li>
<aclass= "tab"href= "https://stackoverflow.com">ccc</a>
</li>
</ul>

.active{
pointer-events:none;
}

Tối chung hiệu quả

Hảo tượng một thập ma hiệu quả 😂

7,CSSNhư hà thật hiện văn tự lưỡng đoan đối tề

Nhu cầu

Hồng khuông sở tại đích văn tự hữu tứ cá tự đích, tam cá tự đích, lưỡng cá tự đích, như quả bất lưỡng đoan đối tề khả dĩ tuyển trạch cư trung đối tề, hoặc giả hữu đối tề. Đãn thị như quả yếu tưởng văn tự lưỡng đoan đối tề ni?

Đại mã

<div>Tính danh</div>
<div>Thủ cơ hào mã</div>
<div>Nghiệm chứng mã</div>
<div>Trướng hào</div>
<div>Mật mã</div>

div{
margin:10px0;
width:100px;
border:1pxsolid red;
text-align-last:justify;
}

Tối chung hiệu quả

8, sử dụng:not()Khứ trừ đạo hàng thượng bất nhu yếu đích chúc tính

Nhu cầu

Hữu thời hầu đạo hàng lan nhu yếu chi gian nhu yếu dụng đậu hào, tiến hành cách ly, đãn thị tối hậu nhất cá bất nhu yếu

Đại mã

<ulclass= "nav">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>

li{
list-style:none;
margin-bottom:10px;
display:inline-block;
}

ul>li:not(:last-child)::after{
content:",";
}

Đương nhiên, nhĩ khả dĩ sử dụng.nav li + li( bất bao quát đệ nhất cá li) hoặc giả.nav li:first-child ~ li( bất bao quát tối hậu nhất cá li), đãn thị sử dụng:not()Đích ý đồ đặc biệt thanh tích,CSSTuyển trạch khí án chiếu nhân loại miêu thuật tha đích phương thức định nghĩa biên khuông.

Tối hậu hiệu quả

Hoặc giả, nhĩ dĩ kinh học tập liễu nhất ta quan vu sử dụng:not(), nhĩ hoàn khả dĩ thường thí:

/* tuyển trạch 1 đáo 3 đích nguyên tố tịnh hiển kỳ */
li:not(:nth-child(-n+3)){
display:none;
}

9, di động web hiệt diện chi trì đạn tính cổn động

Nhu cầu

Tại IOS cơ hình trung, phi body nguyên tố đích cổn động điều hội phi thường bất lưu sướng, hựu bất tưởng dụng JS mô nghĩ cổn động điều.

Truyện thốngpcĐoan trung, tử dung khí cao độ siêu xuất phụ dung khí cao độ, thông thường sử dụngoverflow:autoKhả xuất hiện cổn động điều tha động hiển kỳ dật xuất đích nội dung, nhi di độngwebKhai phát trung, do vu lưu lãm khí hán thương đích hệ thống bất đồng, bản bổn bất đồng, đạo trí hữu bộ phân cơ hình vưu kỳ thịIOSCơ hình bất chi trì đạn tính cổn động, tòng nhi tại khai phát trung chế tạo liễu sở vị đíchBUG.

Đại mã

body{
-webkit-overflow-scrolling:touch;/* ios5+ */
}
ele{
overflow:auto;
}

-webkit-overflow-scrollingChúc tính cụ hữu kế thừa hiệu quả, sở dĩ tạibodyThượng thiết trí tức khả, giá dạng cục bộ cổn động điều tựu phi thường đích lưu sướng liễu.

Tối chung hiệu quả

Sở hữu cổn động điều đô tương đương đích lưu sướng liễu

10, mỹ hóa lưu lãm khí tự đái đíchradio,checkboxChúc tính

Nhu cầu

Thiết kế sư: Nhĩ na cá đan tuyển khuông án nữu hảo sửu a, cân ngã đích thiết kế cảo soa hảo viễn. Trình tự viên: Ngã hữu thập ma bạn pháp, lưu lãm khí tựu thị giá dạng đích...

Ký đắc cương khai thủy tả hiệt diện thời hầu, bị lưu lãm khí các chủng mặc nhận đíchUIDạng thức ác tâm đáo liễu, đương sơ xác thật dã một xá bạn pháp, phản chính dã bất ảnh hưởng công năng, tựu na dạng ba.

Tiên giảng nhất hạ nguyên lý: checkbox hack kỹ thuật

Ngã môn sử dụngCSSNhất ta đặc thù đích tuyển trạch khí, nhiên hậu phối hợp đan tuyển khuông dĩ cập phục tuyển khuông tự đái đích nhất ta đặc tính, khả dĩ thật hiện nguyên tố đích hiển kỳ ẩn tàng hiệu quả. Nhiên hậu thông quá nhất ta giản đan đích khoách triển, ngã môn khả dĩ bất sử dụng nhậm hàJavaScriptĐại mã thật hiện loại tự: Tự định nghĩa đích đan phục tuyển khuông, “Canh đa” triển khai dữ thu khởi hiệu quả, tuyển hạng tạp thiết hoán hiệu quả, hoặc thị đa cấp hạ lạp liệt biểu hiệu quả đẳng đẳng.

Tương tín ngận đa tiền đoan khai phát nhân viên đô hội ngộ đáobossNhượng tu cảicheckboxHòaradioDạng thức, tất cánh tự đái đích dạng thức thái sửu liễu. Hậu lai ngã môn phát hiện tu cải tự đái dạng thức tịnh bất thị na ma dung dịch, tối hậu trực tiếp sử xuất sát thủ giản —— điểm kích chi hậu thế hoán đồ phiến.

Kim thiên giáo đại gia nhất chủng phương pháp, bất dụng thế hoán đồ phiến, tùy ý tu cải dạng thức.

Tiên giảng nhất hạ nguyên lý: Lưỡng cá quan kiện đông đông, nhất thị ngụy loại tuyển trạch khí:checked,Biểu kỳ đối ứng khống kiện nguyên tố ( đan tuyển khuông hoặc thị phục tuyển khuông ) tuyển trung thời đích dạng thức; nhị tựu thị gia hào+Tương lân huynh đệ tuyển trạch khí, giá cá phù hào biểu kỳ tuyển trạch hậu diện đích huynh đệ tiết điểm. Vu thị, lưỡng giả phối hợp, tựu khả dĩ khinh tùng tự như khống chế hậu diện nguyên tố đích hiển kỳ hoặc giả ẩn tàng, hoặc thị kỳ tha dạng thức liễu.

Nhi như hà nhượng đan phục tuyển khuông tuyển trung hòa bất tuyển trung liễu, na tựu thịlabelTiêu thiêm liễu cáp,forChúc tính miêu định đối ứng đích đan tuyển khuông hoặc thị phục tuyển khuông, nhiên hậu điểm kích giá lí đíchlabelTiêu thiêm nguyên tố đích thời hầu, đối ứng đích đan phục tuyển khuông tựu hội tuyển trung hoặc thị thủ tiêu tuyển trung. Nhiên hậu, tựu hữu thượng diện đích hiệu quả lạp!

Đại mã

Giá lí chỉ cấp nhất cáradioĐan tuyển khuông đích đại mã, cận cung tham khảo:

<divclass= "radio-beauty-container">
<label>
<spanclass= "radio-name">Tiền đoan công trình sư</span>
<inputtype= "radio"name= "radioName"id= "radioName1"hidden/>
<labelfor= "radioName1"class= "radio-beauty"></label>
</label>
<label>
<spanclass= "radio-name">Hậu đoan công trình sư</span>
<inputtype= "radio"name= "radioName"id= "radioName2"hidden/>
<labelfor= "radioName2"class= "radio-beauty"></label>
</label>
<label>
<spanclass= "radio-name">Toàn sạn công trình sư</span>
<inputtype= "radio"name= "radioName"id= "radioName3"hidden/>
<labelfor= "radioName3"class= "radio-beauty"></label>
</label>
</div>

.radio-beauty-container {
font-size: 0;
$bgc: green;
%common {
padding: 2px;
background-color: $bgc;
background-clip: content-box;
}
.radio-name {
vertical-align: middle;
font-size: 16px;
}
.radio-beauty {
width: 18px;
height: 18px;
box-sizing: border-box;
display: inline-block;
border: 1px solid $bgc;
vertical-align: middle;
margin: 0 15px 0 3px;
border-radius: 50%;
&:hover {
box-shadow: 0 0 7px $bgc;
@extend %common;
}
}
input[type= "radio" ]:checked+.radio-beauty {
@extend %common;
}
}

Tối chung hiệu quả

Mỹ hóa radio đan tuyển khuông tại tuyến dự lãm địa chỉ:Điểm kích ngã nha
Mỹ hóa checkbox phục tuyển khuông tại tuyến dự lãm địa chỉ:Điểm kích ngã nha

Canh đa quan vu giá phương diện đích giới thiệu hòa lệ tử khả dĩ tham khánTrương hâm húcĐại thần đích giá thiên văn chương:CSS radio/checkbox đan phục tuyển khuông nguyên tố hiển ẩn kỹ thuật

11, cải biếninputTiêu điểm quang tiêu đích nhan sắc

Nhu cầu

Thiết kế sư giác đắc mặc nhận đích quang tiêu nhan sắc hữu điểm dữ chỉnh thể thiết kế phong cách bất phù hợp, hữu điểm đột ngột, tưởng hoán thành hồng sắc đích

Đại mã

<inputvalue= "This field uses a default caret."/>
<inputclass= "custom"value= "I have a custom caret color!"/>

input{
caret-color:auto;
display:block;
margin-bottom:.5em;
}

input.custom{
caret-color:red;
}

Tối chung hiệu quả

12,remBố cục bất tái sử dụngJavaScriptThiết trí

Giá lí bất tham thảoremĐích nguyên lý dĩ cập tế tiết, hoàn bất thục tất đích đồng hài kiến nghị khứ ác bổ nhất hạ.

Nhu cầu

Hữu thời hầu, di động đoan dụngremBố cục thời hầu, căn cư bất đồng đích bình mạc khoan độ yếu thiết trí bất đồng đíchfont-sizeLai tố đáo thích phối, yếu tả nhất đàJSLai thiết trí, năng bất năng bất dụng JS ni?

Lệ như: Dĩ750pxThiết kế cảo tác vi cơ chuẩn, căn tiết điểm thiết trífont-sizeVi100px,Chỉ khảo lựDPRVi2Đích tình huống, chỉ khảo lự tối giản đan đích tình huống

document.querySelector('html').style.fontSize=`${window.innerWidth/7.5}px`;

Đại mã

Hiện tại di động đoancss3Đan vịvw,whKiêm dung tính dĩ kinh ngận bất thác liễu, tại bất nhu yếu kiêm dung thái đê bản bổn đích an trác cơ tình huống hạ khả dĩ giá dạng lai:

html{
font-size:calc(100vw/7.5)
}

Tối chung kết quả

Tựu giá ma giản đan đích thiết trí,remTựu khả dĩ sử dụng liễu

13, lợi dụngtransparentChúc tính thật hiện các chủng tam giác hình, đề kỳ khuông

Nhu cầu

Tại bất sử dụng đồ phiến đích tình huống, thật hiện nhất cá giản đan đích tam giác hình tiễn đầu

Đại mã

#triangle-right{
width:0;
height:0;
border-top:50pxsolid transparent;
border-left:100pxsolid red;
border-bottom:50pxsolid transparent;
}

Tối chung hiệu quả

Phục tạp điểm đích thoại, đồng dạng đích nguyên lý hoàn khả dĩ thật hiện nhất cáNgũ giác tinh,Nguyên lý đô thị lợi dụngtransparentĐích thấu minh chúc tính.

14, nhượng võng trạm sở hữu đồ phiến biến thành hắc bạch sắc thải đích

Nhu cầu

Ký đắc 2008 niên thời hầu vấn xuyên đại địa chấn thời hầu, ngận đa võng trạm đồ phiến đô biến thành hắc bạch sắc thải điệu niệm thệ giả

Đại mã

<imgsrc= "https://user-gold-cdn.xitu.io/2017/9/25/0844cf44a8d8c4ed026d6c488a6e9b80?
imageView2/1/w/500/h/200/q/85/interlace/1"alt= ""class= "desaturate">

img.desaturate{
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
}

Tối chung hiệu quả

15, thật hiện văn tự đích ba lãng tuyến hiệu quả

Nhu cầu

Thật hiện văn tự ba lãng tuyến đích cường điều hiệu quả, như đồ sở kỳ

  tương tín đại gia đối vutext-decorationGiá cá chúc tính tịnh bất mạch sinh, tại trọng tríaTiêu thiêm đích mặc nhận dạng thức thời, ngã môn kinh thường yếu giá dạng tả:text-decoration: none;Khả năng đối tha liễu giải đích nhân dã ngận thiếu, thật tế thượngtext-decorationThị nhất cá phục hợp chúc tính, doline,styleHòacolorTổ thành.

   sở dĩ ngã môn khả dĩ thật hiện giá dạng đích hiệu quả:

   khả tích đích thịlineChỉ hữuunderline( hạ hoa tuyến ),overline( thượng hoa tuyến ) hòaline-through( san trừ tuyến ). Như quả đột nhiên nhu yếu hạ hoa ba lãng tuyến, chẩm ma bạn ni? Bất yếu cấp, thần kỳ đíchCSSHội bang nhĩ tố đáo đích. Thủ tiên, nhĩ nhu yếu tiên liễu giải nhất hạTiệm biến đích sử dụng kỹ xảo.

   thuyết nhất hạ giá lí đích tư lộ, ngã môn thủ tiên yếu dụng lưỡng đoạn tiệm biến cấu tạo nhất cá cơ bổn nguyên tố: 'X'( giá lí ngã tựu bất phóng đồ liễu ), hạ nhất bộ tựu bỉ giác trọng yếu liễu, ngã môn yếu tiệt thủ 'X' đích thượng bán bộ phân, đắc đáo nhất cá 'V', tòng nhi kết hợprepeatHình thành ba lãng tuyến. Hạ diện thị dụngscssTả đích nhất cámixin,Phương tiện dĩ hậu sử dụng.

Đại mã

@mixinwaveline($color,$h) {
position:relative;
&::after{
content:'';
display:block;
position:absolute;
top:100%;
left:0;
width:100%;
height:$h;
background:linear-gradient(135deg,transparent,transparent45%,$color,transparent55%,transparent100%),
linear-gradient(45deg,transparent,transparent45%,$color,transparent55%,transparent100%);
background-size:$h*2 $h*2;
}
}

Tối chung hiệu quả

Kiêm dung tính

Giá ta kỹ xảo tại đương tiền bản bổn đíchChrome,Firefox,Safari,Dĩ cậpEdge,HòaIE11Khả dĩ công tác, di động đoan cơ bổn đô một vấn đề,IETrọng độ khai phát giả thận dụng.

Tương quan kiêm dung tính tự hành tra trảo:https://caniuse.com/

Thôi tiến nhất ba

Hữu thú đích GitHub thương khố

Quốc phục đệ nhất thiết đồ tử đích CSS thương khố: Nhĩ tưởng tri đạo đích CSS kỳ kỹ dâm xảo, tại giá lí, đô hữu.iCSS -- interesting css

Trương hâm húc lão sư đích bác khách

Tiền đoan kỹ thuật

Thụ ích pha đa, sở dĩ thôi tiến nhất ba. 😂