小白的CSS技巧
文章目錄
前言
整理了一些我個人感覺比較好看和實用的CSS技巧！
或許這些技巧對你來說毫無用處，但也別噴哈。
valid 和 invalid 校驗表單
- CSS代碼
* {
padding: 0;
margin: 0;
}
input {
border: none;
outline: none;
border: 2px solid #43E38B;
border-left-width: 5px;
padding-left: 5px;
height: 30px;
margin: 50px;
}
input:invalid {
border-color: red;
}
input:valid {
color: deepskyblue;
}
- HTML代碼
<input type="text" placeholder="請輸入QQ" pattern="^[1-9][0-9]{4,}$" />
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mSbhLoEw-1590220510218)(新建文件夾/1.gif)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155603191.gif#pic_center)
selection 改變文本選擇顏色
- CSS代碼
body::selection {
background-color: pink;
color: #fff;
}
- HTML代碼
<body>
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
選擇文字
</body>
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-G7IGwMEp-1590220510222)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155624607.gif#pic_center)
caret-color 改變光標顏色
- CSS代碼
input {
height: 50px;
font-size: 40px;
caret-color: red;
}
- HTML代碼
<input type="text">
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OMszAlSf-1590220510227)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155642190.png#pic_center)
scrollbar 改變滾動條樣式
- CSS代碼
body::-webkit-scrollbar {
width: 8px;
}
body::-webkit-scrollbar-track {
background-color: rgba(0,191,255,.09);
}
body::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #00BFFF;
}
- HTML代碼
<p>我滾！！！！！！！！！！！！</p>
<p>我滾！！！！！！！！！！！！</p>
<p>我滾！！！！！！！！！！！！</p>
<p>我滾！！！！！！！！！！！！</p>
<p>我滾！！！！！！！！！！！！</p>
<p>我滾！！！！！！！！！！！！</p>
【注意：此處省略N行P標籤...】
<p>我滾！！！！！！！！！！！！</p>
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-a4H6b8FL-1590220510239)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155658513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDk4MTk3,size_16,color_FFFFFF,t_70#pic_center)
writing-mode 實現豎行文字
- CSS代碼
body {
writing-mode: vertical-rl;
}
- HTML代碼
<body>
年少輕狂.
</body>
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TMHJmwE8-1590220510241)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155712417.png#pic_center)
text-align-last 文字兩端對齊
- CSS代碼
button {
width: 200px;
height: 35px;
text-align-last: justify;
}
- HTML代碼
<button type="button">賬號</button>
<br>
<button type="button">密碼</button>
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-HAkSjTQX-1590220510248)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155915720.png#pic_center)
animation 自動打字
- CSS代碼
@keyframes typing {
from {
width: 0;
}
}
@keyframes caret {
50% {
border-color: transparent;
}
}
p {
width: 16em;
overflow: hidden;
white-space: nowrap;
border-right: 0.1em solid;
animation: typing 4.5s steps(16), caret .5s steps(1) infinite;
}
- HTML代碼
<p>我的朋友叫孤獨，是我餘生的夥伴！</p>
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QHCurpvl-1590220510253)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155732478.gif#pic_center)
filter 描繪頭像彩色陰影
- CSS代碼
div {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 50px;
position: relative;
background: url(18.jpg) center/cover;
}
div::after {
content: "";
position: absolute;
left: 0;
top: 10%;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
filter: blur(10px) brightness(80%) opacity(.8);
z-index: -1;
transform: scale(.95);
}
img {
width: 100%;
}
- HTML代碼
<div></div>
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DmmPGePh-1590220510259)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155745483.png#pic_center)
CSS邊框
公共部分
- CSS代碼
body {
background-color: #33CC99;
}
#box {
width: 500px;
margin: 200px auto;
text-align: center;
}
- HTML代碼
<div id="box">
夜深人靜的時候，雙手在鍵盤上舞蹈<br/>
那敲擊出來的聲音，真的是美妙~
</div>
CSS邊框 - 動畫邊框
- CSS代碼
@keyframes animated-border {
0% {
box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255,255,255,0);
}
}
#box {
animation: animated-border 1.5s infinite
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
border: 2px solid;
border-radius: 10px;
padding: 15px;
}
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6coXicaT-1590220510261)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/2020052315580455.gif#pic_center)
CSS邊框 - 帶陰影的雙邊框
- CSS代碼
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
box-shadow: 0 0 0 10px #009688;
border: 10px solid #009688;
outline: dashed 10px white;
}
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gY50ukpX-1590220510266)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155814837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDk4MTk3,size_16,color_FFFFFF,t_70#pic_center)
CSS邊框 - 多色邊框
- CSS代碼
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
background:
linear-gradient(to top, #4caf50, #4caf50 10px, transparent 10px),
linear-gradient(to right, #c1ef8c, #c1ef8c 10px, transparent 10px),
linear-gradient(to bottom, #8bc34a, #8bc34a 10px, transparent 10px),
linear-gradient(to left, #009688, #009688 10px, transparent 10px);
background-origin: border-box;
}
- 效果
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1QhhiUJI-1590220510271)(新建文件夾/)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200523155831365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDk4MTk3,size_16,color_FFFFFF,t_70#pic_center)