整理了一些我个人感觉比较好看和好玩的CSS技巧！ 关于CSS边框，我从这里选取的，完整请看：https://mp.weixin.qq.com/s/l_ngEPmSEtHj_9tCmNnG2Q
小白的CSS技巧
文章目录
前言
其实还有挺多的，这里列出我自己喜欢的。
或许这些技巧对你来说毫无用处，因为你已经成功的成为了一位大佬。哈哈哈~valid 和 invalid 校验表单
* { 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; }
<input type="text" placeholder="请输入QQ" pattern="^[1-9][0-9]{4,}$" />
selection 改变文本选择颜色
body::selection { background-color: pink; color: #fff; }
<body> 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 选择文字 </body>
caret-color 改变光标颜色
input { height: 50px; font-size: 40px; caret-color: red; }
<input type="text">
scrollbar 改变滚动条样式
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; }
<p>我滚！！！！！！！！！！！！</p> <p>我滚！！！！！！！！！！！！</p> <p>我滚！！！！！！！！！！！！</p> <p>我滚！！！！！！！！！！！！</p> <p>我滚！！！！！！！！！！！！</p> <p>我滚！！！！！！！！！！！！</p> 【注意：此处省略N行P标签...】 <p>我滚！！！！！！！！！！！！</p>
writing-mode 实现竖行文字
body { writing-mode: vertical-rl; }
<body> 年少轻狂. </body>
text-align-last 文字两端对齐
button { width: 200px; height: 35px; text-align-last: justify; }
<button type="button">账号</button> <br> <button type="button">密码</button>
animation 自动打字
@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; }
<p>我的朋友叫孤独，是我余生的伙伴！</p>
filter 描绘头像彩色阴影
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%; }
<div></div>
CSS边框
公共部分
body { background-color: #33CC99; } #box { width: 500px; margin: 200px auto; text-align: center; }
<div id="box"> 夜深人静的时候，双手在键盘上舞蹈<br/> 那敲击出来的声音，真的是美妙~ </div> 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; }
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; }
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; }
文末
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
