常用CSS样式总结

文章列表
常用CSS样式总结
<!doctype html>
<html><head><meta charset="utf-8"><title>border-radius</title><!-- 外框常用样式 --><style>/* 引入服务器端的字体（慕课网字体为例） */?{font-family: "MOOC_Font";src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");}.box{/* 宽 */width: 100%; /* 高 */height: 60px;/* 背景 */background: #ffffff;/* 圆角 */border-radius:100px;font-size: 42px;/* 设置字体 */font: bold 30px/100% "微软雅黑";/* 超出直接截断CSS3 */text-overflow:clip | ellipsis;  overflow:hidden; white-space:nowrap;/* 超出则使用省略号代替 */text-overflow:ellipsis; overflow:hidden; white-space:nowrap;/* 使用服务器端字体 */font-size:58px;font-family: "MOOC_Font";/* 设置文字阴影 */text-shadow: 2px 2px 0 rgb(128, 128, 128);/* 虚线框 */border:4px dashed #000; /* 字体加粗  normal 或 bold*/font-weight:bold; /* 外阴影：右下 */box-shadow:4px 4px 6px #5b5b5b; /* 外阴影：左下 */box-shadow:-4px 4px 6px #666;/* 外阴影：左上 */box-shadow:4px -4px 6px #5b5b5b;/* 外阴影：由上 */box-shadow:-4px -4px 6px #5b5b5b; /* 内阴影：和外阴影冲突 */box-shadow:4px 4px 6px #d80000 inset;/* 多阴影 */box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 12px 5px #250032 inset;/* 边框应用图片 */background:url(http://soface.top:8080/source/Public/OfficialPicture/ZH007/Soface202208141130161002.jpg) 0px 20px no-repeat;/* 使用RGBA颜色 */background-color:rgba(255, 55, 0, 0.5);/* 线性渐变 正方向：left、right、top、bottom、斜方向：left top*/background-image:linear-gradient(to left top, red, orange,yellow,green,blue,indigo,violet);}</style></head><body><div class="box"></div></body>
</html>
常用CSS样式总结

相关问题

公告
