CSS·模块样式设计(边框模糊、背景渐变、文字阴影)
1.CSS 【边框阴影】
/* 边框阴影 [右偏] [下偏] [模糊度] [边框宽度] [颜色]*/ box-shadow: 0px 0px 1px 2px #06c;
实例化:
/* 边框阴影 [右偏] [下偏] [模糊度] [边框宽度] [颜色] 要多少圈增加多少圈*/ box-shadow: 0px 0px 1px 2px #06c,1px 1px 1px 2px #e33c27,1px 1px 1px 5px #3eed19,1px 1px 1px 5px #e4211d,1px 1px 1px 15px #5064e7;
2.CSS【边框四边单颜色】
/* 边框四边单颜色 */ border-style: solid; /* 边框样式 */ border-width: 10px 5px 12px 3px; /* 边框大小 */ border-radius: 12px 2px 5px 10px; /* 边框弧度 */ border-color: #fd8008 #909 #808 #707; /* 边框边色 transparent为透明 */
3.CSS 【背景渐变色】
border-radius: 15px; /* 椭圆 */ /* 背景渐变色 300deg 为颜色旋转方向 */ background-image: linear-gradient(300deg, #ffffff, #a0a, #909, #fd8008, #707, #fd8008);
4.CSS【文字阴影】
/* 文字阴影 */ text-shadow: 0 .15rem .2rem rgba(0, 0, 0, .2); /* 文字行距 */ line-height: 105%; /* 空格自动换行 */ white-space:Pre-line; /* display布局时内容自动换行 */ flex-flow: wrap;
5.CSS【鼠标类】
/* 鼠标点击不修改样式 */ pointer-events:none;
6.CSS【字母字符自动换行】
.info_BBS_text_R_4{ /* 字母字符自动换行 */ table-layout:fixed; word-break: break-all; overflow:hidden; }
1,339 Views