CSS
关注
分享
扫一扫
相关css操作
小鬼buster
这个作者很懒，什么都没留下…
展开
-
常用布局及定位
相对定位1. 相对定位会使元素提升一个层级2. 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素绝对定位1. 绝对定位会使元素提升一个层级2. 绝对定位会改变元素的性质 内联元素变成块元素 块元素的宽度和高度默认都被内容撑开...原创 2021-03-24 09:28:03 · 217 阅读 · 0 评论 -
使用css绘制按步骤显示进度条
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style lang="scss" scoped> .top { display: block; background-color: black; margin: 0 auto; width: 600px; margin-.原创 2020-09-15 15:44:05 · 558 阅读 · 0 评论 -
css实现圆角梯形
代码及实现效果如下<style type="text/css"> .text{ width: 80px; height: 80px;/* 宽高 */ background-color: brown;/* 颜色 */ border-radius: 8px;/* 设置圆角 */ transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg); /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴.原创 2020-10-20 15:20:51 · 10065 阅读 · 2 评论 -
css标题样式——绘制中间文字，两边横线居中
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style lang="scss" scoped> .title-center { position: relative; width: 100%; text-align: center; height: 100px; l.原创 2020-09-17 16:15:27 · 1055 阅读 · 0 评论 -
使用css实现文字颜色渐变显示
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .number { text-align: center; font-size: 5.5rem; color: #f5ab7c; background-image: -webkit-linear-gradient(b.原创 2020-09-15 13:36:52 · 305 阅读 · 0 评论 -
css常用居中总结
1.块级元素嵌套居中（实现带下划线的文本居中）<style> .div1 { width: 100%; } .div2 { width: 15%; margin: 0 auto;/* //使div2在div1的中间显示 */ text-align: center;/* //让文本在横线中间 */ } .ll { border-bottom: 1px solid black; }</style></head><body>原创 2020-10-21 15:29:35 · 133 阅读 · 0 评论 -
仅使用css绘制带边框的圆
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .circle { float: left; background: #fff; border: 1px solid #3aba6b; position: relative; box-sizing: bord.原创 2020-09-15 13:33:34 · 609 阅读 · 0 评论 -
实现单行文字两端对齐，例如要实现下列单行文字对齐
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style lang="scss" scoped> .line { width: 100%; height: 15px; margin: 5px; } .public { width: 80px; heigh.原创 2020-09-17 16:56:42 · 153 阅读 · 0 评论 -
css常用样式
text-align: left; /*文本左对齐*/ font-size: 18px; /*字体大小 18 像素*/ line-height: 25px; /*行高 25 像素*/ text-indent: 2em; /*首行缩进两个文字大小空间*/ width: 500px; /*段落宽度 500 像素*/ margin: 0 auto; /*浏览器下居中*/ color: #6699FF; /*字体颜色的改变*/...原创 2020-07-13 09:39:21 · 131 阅读 · 0 评论 -
纯css绘制简易对话气泡
<body> <div class="curType blockCenter" > <p>绘制简易气泡</p> <div class="triangle"></div> </div> </body><style> p{ box-shadow: 2px 1px 18.27px 2.原创 2021-03-27 16:18:20 · 219 阅读 · 1 评论 -
纯css绘制一个倒置的正三角
<body> <div class="triangle"> </div> </body><style> .triangle { border-left: 23px solid transparent; border-right: 23px solid transparent; border-bottom: 40px solid lightblue; width: 0px; height: 0px;..原创 2021-03-27 16:14:55 · 381 阅读 · 1 评论