CSS·模块样式设计(边框模糊、背景渐变、文字阴影)

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,287 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注