好看的CSS样式
好看的按钮样式
1.好看的按钮样式：
<style>button, input { line-height: 35px; color: #fff; & a { color: #fff; text-shadow: 2px 2px 1px #000; } background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0)); background-color:#099204; ; box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6); border-radius: 10px; text-shadow: 1px 1px 1px #000; border: 0px solid black; font-size: 20px; padding: 0 10px; text-align: center; cursor: pointer; transition: all 0.1s ease; } .up-button3:hover, button:hover, input:hover { background-color: rgba(183, 0, 0, 0.861); } .up-button3 { background-color: rgb(255, 0, 0); } /* 按钮凹进去的样式 */ button:active, input:active { box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); }<style>好看的复选框样式
<style>input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; position: relative; margin-right: 10px; border-radius: 50%; } input[type="checkbox"]::after { content: ""; width: 100%; height: 100%; border: 2px solid #f10505; position: absolute; left: -3px; top: -3px; border-radius: 50%; } /* 设置checkbox点击之后的样式*/ input[type="checkbox"]:checked::after { height: 15px; width: 25px; border-top: none; border-right: none; border-radius: 0; transform: rotate(-45deg); transition: all 0.5s ease-in-out; }</style>图片背景样式
图片背景样式
<style> body { text-indent: 5em; background-image: url("file:///D:/%E5%9B%BE%E7%89%87/yyds.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; }</style> 颜色渐变背景样式
背景样式1
<style>body {text-indent: 5em;background: linear-gradient(0.25turn, #130808, #1a1c06ac, #011e1c82); }</style>
备忘录最初的样式文章来源：https://www.toymoban.com/news/detail-823414.html
备忘录最初的样式 <style>* { /* 外边距: 上右下左 */ margin: 0px 0px 0px 0px; /* 内边距: 上右下左 */ padding: 0 0 0 0; /* 文本颜色 */ color: #fff; } body { /* background: #cfd1e1; */ /* 文本缩进 */ text-indent: 5em; background: linear-gradient(0.25turn, #130808, #1a1c06ac, #011e1c82); /* background-image: url("file:///D:/%E5%9B%BE%E7%89%87/yyds.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; */ } /* ********************背景颜色区**************************************** */ /* 3D立体文本的样式 */ dfn { text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 } /* 3D背景的样式 */ .down-div, .finish, input, sub, button { background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px #100000; border: 0; line-height: 30px; padding: 0 10px; border-radius: 10px; } /* 按钮凹进去的样式 */ button:active, input:active { box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } /* 背景颜色 */ .up-button, sub, .updiv { background-color: #59f43aec; } button { background-color: #f4770a; } input { background-color: #f6d607; } input:hover, button:hover, .up-button3 { background-color: #ff0000fb; } .down-div { background-color: rgba(51, 154, 25, 0.502); } /* 鼠标变小手 */ input, button { cursor: pointer; } /* ***********************h1-div区************************************* */ .h-div { h1, p { display: inline; color: #000000; } } /* **********************up-div区************************************** */ .up-div { /* 圆角 */ border-radius: 10px; .up-button+input { width: 150px; } ; textarea { /* 文本对齐 居中*/ text-align: center; /* 字体大小 */ color: rgb(0, 0, 0); &::placeholder { color: rgb(248, 0, 0); /* 文本间隔 */ } } } /* ***********************down-div************************************* */ /* -设置checkbox样式----*/ input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; position: relative; margin-right: 10px; border-radius: 50%; } input[type="checkbox"]::after { content: ""; width: 100%; height: 100%; border: 2px solid #f10505; position: absolute; left: -3px; top: -3px; border-radius: 50%; } /* 设置checkbox点击之后的样式*/ input[type="checkbox"]:checked::after { height: 15px; width: 25px; border-top: none; border-right: none; border-radius: 0; transform: rotate(-45deg); transition: all 0.5s ease-in-out; } /* 选中文本样式 */ .finish { /* text-decoration: line-through; */ background: #000000; color:rgba(64, 250, 17, 0.765) }</style>布局容器css画布背景样式文章来源地址https://www.toymoban.com/news/detail-823414.html
<style> /*页面初始化，清除所有元素的内外边距*/ /* * { padding: 0; margin: 0; } */ body { background-color: #111; color: #fff; } .container { /* 绝对定位 */ position: absolute; /*calc()函数，动态计算，动态改变元素的位置 */ /* top: calc(50% - 120px); left: calc(50% - 120px); */ width: 200px; height: 200px; padding: 20px; /* 圆形 */ border-radius: 50%; /* 第二种 */ top: 50%; left: 50%; /* 就是先让盒子走页面的50% */ /* 然后用转换属性的2D位移 让元素走自身的宽度/高度的一半,利用这个属性就免去了计算 可以更快更方便的让元素到中间 */ transform: translate(-50%, -50%); /* 背景渐变色 旋转150度进行着色 transparent是透明色 */ background-image: linear-gradient(150deg, #5f2093, transparent, transparent); /* 动画 名称 时长 第三个属性值是贝塞尔曲线(让动画的运动轨迹有很多可能性),有兴趣自己研究一下(https://cubic-bezier.com/) infinite是无限次播放 */ animation: move 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } .container::before, .container::after { content: ""; /* 相对定位 会以自身的当前位置进行位移 */ top: -185px; left: 65px; position: relative; /* 伪元素是行内元素 需要转为块级来设置宽和高 */ display: block; width: 10px; height: 10px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.8); } .container::before { width: 35px; top: 40px; left: 30px; /* 逆时针旋转40度 */ transform: rotate(-40deg); } /* 行星 start */ .container .planet { width: 100%; height: 100%; border-radius: 50%; /* 同上 */ background-image: linear-gradient(150deg, #a37dce, #5f2093, transparent); } /* 行星 end */ /* 环绕的轨道 start */ .container .planet::before, .container .planet::after { content: ""; position: absolute; top: 90px; left: -40px; width: 300px; height: 40px; border-radius: 50%; border: 10px solid #c099ef; /* 先让两个伪元素的上边框颜色都为透明色 */ border-top-color: transparent; /* 逆时针旋转20度 */ transform: rotate(-20deg); } .container .planet::after { border-top-color: #c099ef; /* 这个属性是堆叠顺序 只针对定位元素有效 这里随便写个负值就可以对于的部分就会被覆盖掉 */ z-index: -99; } /* 环绕的轨道 end */ /* 做一下漂浮的动画 */ @keyframes move { 0% { top: 50%; } 50% { top: 45%; } 100% { top: 50%; } }</style> <div class="container">
<div class="planet"></div>到了这里，关于好看的css样式:可以直接复制给备忘录用的的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
