盒子阴影、渐变、对超出文本文字的基本操作

303 阅读1分钟

radius: 4个值 按照顺时针顺序写 

3个值 按照 左上 右上-左下 右下 

2个值 按照 左上-右下 右上-左下

 box-shadow:inset 0 0 30 bule【盒子阴影】 :x轴距离 y轴距离 模糊半径 模糊颜色 

不设置inset 默认是外阴影

 list-style-type: 属性:circle(空心圆)、decimal(数字)、disc(实心圆)、

 disclosure-open(下箭头)、disclosure-closed(右箭头)

 background-size:宽 高;100%一样 

text-indent不会改变盒子的大小,

padding-left会改变盒子的大小

 线性渐变:background:linear-gradient(to bottom, , ,)【从上往下渐变颜色】

 径向渐变:background:radial-gradient(circle,5%,30%,60%)【从中间往外散发】

 text-overflow:ellipsis;【超出的文本用省略号来表示】

 white-space:nowrap;【文本不会换行,在同一行继续】 

 p{text-shadow:5px 5px 5px #fff}【向文本添加阴影,水平,垂直,模糊距离,颜色】 

 overflow:hidden;【溢出文字被隐藏】

 text-overflow:ellipsis;【超出文本框的文字用省略号来表示 ellipsis叫被修饰的文本】 white-space:nowrp;【文本不会换行,在同一行继续】 

 【定义字体】(这个字体只针对英文,中文不生效)

 font-family:myfont; src:url(防止浏览器对文本的兼容性,全部选中;) 

h1{font-family:myfont;} 

【可以寻找相关更多字体网站iconfont.cn】