css3的笔记

111 阅读2分钟

border-radio属性,改边框的圆润度

width: 200px;

height: 200px;

border: 2px solid rebeccapurple;

上右下左都是50%

border-radius: 50%;

写四个值按顺时针顺序

border-radius: 0 30px 50px; 左上角0,右上角和左下角为30(对角),右下角50

border-radius:30px 50px; 左上角和右下角30,右上角和左下角50

盒子阴影:(五个属性)

inset:阴影类型内阴影

x-offset:X轴位移,指定阴影水平位移量

y-offset:y轴位移,指定阴影水平位移量

blur-radius:模糊半径的大小

color:阴影颜色

写法为: box-shadow:inset x-offset y-offset blur-radius color;

例如 : box-shadow:inset 0px 10px 10px blue;

box-shadow,默认的是外阴影,不设置就是自动外阴影,设置inset就变成了内阴影

width: 200px;

  height: 200px;
  
 border: 2px solid rebeccapurple;
 

上右下左都是50%

border-radius: 50%; 

写四个值按顺时针顺序 

border-radius: 0 30px 50px; 左上角0,右上角和左下角为30(对角),右下角50 

border-radius:30px 50px; 左上角和右下角30,右上角和左下角50

list-style-type: circle; 空心圆

list-style-type: decimal; 数字

list-style-type: disc;实心圆,默认样式

disclosure-closed 右箭头 ,树形图的关闭箭头

disclosure-open 树形图的打开箭头

background

background-size: width height; 如果只给一个值,第二个自动给auto(自动)*,不知道宽高具体数值的情况下,可以设置单位为%

background-size:cover;会保持图像的纵横比,完全覆盖背景的最小大小(图像不一定会展示完全,但是能保证图片的纵横比)

background-size:contain 会保持图像纵横比,并且将图像缩放成适合背景区域最合适的大小,但是不一定能完全覆盖. 渐变 线性渐变: background:linear-gradient

     从上往下 
     background:linear-gradient(to bottom,red,green,blue) 
     从下往上 
     background:linear-gradient(to top,red,green,blue) 
     从左往右 
     background:linear-gradient(to right,red,green,blue) 
     从右往左 
     background:linear-gradient(to left,red,green,blue) 
    从右上到左下 
     background:linear-gradient(to left bottom,red,green,blue) 
     从左下到右上 
     background:linear-gradient(to right top,red,green,blue) 
     径向渐变 
     background: radial-gradient(red 5%,green 30%,blue 60%); 
      圆形的渐变
    background: radial-gradient(circle, red 5%,green 30%,blue 60%); 
    文字属性
    overflow:hidden 溢出隐藏
    表示超出的文本用什么来表示,ellipsis表示省略号表示
    text-overflow: ellipsis;
    white-space:nowrap;白空格 ,文本不会换行,继续在同一行进行

字体fonts @font-face{ font-family:自己取名字 src:url(输入路径)注意,所有字体样式都添加上,不同浏览器的兼容性不同 } 标签{ font-family:上面取得名字 } icon font 在线字体