36种漂亮的CSS3网页按钮Button样式(主要结合before与after)
作者：互联网
2026-03-31
HTML教程
CSS的常用样式
边框以及弧度样式
border-width：边框的线条宽度。border-style：边框的样式，例如 solid实现 dotted 点线 dashed 虚线…border-color：边框的颜⾊border-radius ：可以⽤来设置边框的圆⻆ 或者将边框从矩形改为圆形 或者椭圆形。Border-top-left-radius:⽤来设置边框的左上⻆，还有对应的 右下⻆ 右上⻆ 左上⻆ 这⾥不再赘述。border-top:⽤来单独设置边框的上边沿，同理还有border-bottom border-left border-right
字体样式
font-family：设置字体的“字体”样式 例如 微软雅⿊ monospace。font-size：设置字体的⼤⼩。font-weight：设置字体粗细 常⽤的是boldfont-style：设置斜体。itatic
⽂本样式
text-align：设置⽂本对⻬⽅式text-decoration：修饰⽂本主要使⽤上下中划线。text-transform：⼤⼩写转换uppercase lowercase capitaltext-overflow：设置超出⽂本部分已省略号的形式电视配合overflow：hidden使⽤。overflow:auto⾃动可以显示滑动条。hidden会隐藏超出的内容。overflow-x： 显示横向滑动条。同理overflow-y纵向滑动条。
阴影效果
text-shadow：给⽂本添加阴影。box-shadow：给标签添加阴影。
display 属性
display：none 隐藏标签 标签将失去原本来的占位已经对应属性样式，visibility：hidden只是隐形了标签display：inline-block 将⾏内标签设置为⾏内块标签 使其⽀持宽⾼设置。display：block将⾏内标签设置为块标签。display：inline将块标签设置为⾏内标签。
背景样式
background:color/url（详细可以参考mdn，通按键f1访问）background-url：填写图⽚链接background-color：填写图⽚颜⾊background-repeat：控制图⽚的复制模式，可以横向纵向单独复制（repeat-x,repeat-y），也可以不使⽤复制（no-repeat）。background-position：可以设置图⽚的位置，多⽤于截取精灵图的图⽚background-size：⽤来控制图⽚的⼤⼩精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。background-attouchment：fixed：固定⽹⻚的背景图⽚
定位问题
position：fixed浮动定位 他可以将标签固定在屏幕某个位置 不随⻚⾯滑动⽽产⽣位移。position：absolute：绝对定位，他可以将标签固定在⽗容器中的指定位置。position：relative：相对定位，当⼦标签是绝对定位时，⽗容器必须是相对定位。
浮动float
最初float是⽤来做⽂字化绕图⽚功能的属性，之后⼴泛的应⽤于布局。float:left|right ⽤来控制块标签向左向右挤压，注意右浮动的会使⼦标签按照从右向左的顺序罗列。盒⼦模型的宽是内容部分的宽，整个盒⼦的宽应该是border-width+padding+width。⾼同理
CSS :after 选择器
定义和说明:after 选择器向选定元素的最后子元素后面插入内容。
使用content 属性来指定要插入的内容。
在每个
之后插入的内容和样式:
p:after{ content:"- Remember this"; background-color:yellow; color:red; font-weight:bold;}效果图
实现代码
36种漂亮的CSS3网页按钮Button样式 36种漂亮的CSS3网页按钮Button样式
将上面代码保存后运行就可以看到效果了。
到此这篇关于36种漂亮的CSS3网页按钮Button样式(主要结合before与after)的文章就介绍到这了,更多相关CSS3 Button样式内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
相关推荐
