纯CSS输入区域下划线
生活随笔
收集整理的這篇文章主要介紹了
纯CSS输入区域下划线
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用純CSS實現文本輸入的下劃線，簡潔有效，實現效果：
實現方式
實現方式也很簡單：
background: linear-gradient(#999 1px, transparent 0) 0 -1px/100% 2em;
例子代碼：
實現效果圖：
虛線實現方式
虛線在上方的實現方式上，增加了顏色：
background: linear-gradient(to right, #fff 4px, transparent 0) 0 -4px/8px 100%,/*垂直*/linear-gradient(#666 1px, transparent 0) 0 -1px/100% 2em;/*水平*/例子代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>純CSS輸入區域下劃線-基礎</title><style>* {padding: 0;margin: 0;}.box {width: 100%;height: 600px;}.text {width: 100%;height: 100%;outline: none;border-color: #f00;box-sizing: border-box;font-size: 16px;line-height: 30px;background: linear-gradient(to right, #fff 4px, transparent 0) 0 -4px/8px 100%,/*垂直*/linear-gradient(#666 1px, transparent 0) 0 -1px/100% 2em;/*水平*/}</style> </head><body><h2>純CSS輸入區域下劃線-基礎</h2><div class="box"><textarea class="text"></textarea></div> </body></html>效果圖：
以上均為純色情況，如果有背景圖的方式
純色漸變方式在底色為背景圖或者漸變色時候就有點不大適用了，用混合模式（mix-blend-mode）可以適當調整，但是也是不怎么好，這里通過用錐形漸變(conic-gradient)繪制效果較好，但是兼容性要多考慮：
使用方式：
例子代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>純CSS輸入區域下劃線-基礎</title><style>* {padding: 0;margin: 0;}.box {width: 100%;height: 600px;background: url(./bzlt.jpg) no-repeat;background-size: cover;}.text {width: 100%;height: 100%;outline: none;border-color: #f00;box-sizing: border-box;color: #fff;font-size: 16px;line-height: 30px;background: conic-gradient(from 270deg at 4px 1px, #666 90deg, transparent 0deg);background-size: 8px 2em;}</style> </head><body><h2>純CSS輸入區域下劃線-基礎</h2><div class="box"><textarea class="text"></textarea></div> </body></html>實現效果：
內容圖片：（bzlt.jpg）
總結
以上是生活随笔為你收集整理的纯CSS输入区域下划线的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cef语言(Locales)本地化问题
- 下一篇： CCRC信息安全服务资质认证的意义