css3 阴影、图片边框、边框大小

css3颜色
  1. 十六进制颜色
  • #ffffff    十六进制0-f  两位一色,分别为红、绿、蓝
  • RGB颜色
    • rgb(红,绿,蓝)   0-255
  • RGBA颜色
    • rgba(红,绿,蓝, alpha)  alpha为透明度,取值0-1
  • hls颜色
    • hsl(h,s,l) 色相饱和度设置颜色  h:色调(0-360)0表示红色 120绿色 240蓝色  s:饱和度0-100% l:亮度 0-100%
  • hsla颜色
    • 最后一个属性alpha为透明度,取值0-1
    css3  文本效果
    1.  CSS3 文本阴影
    • text-shadow(水平阴影,垂直阴影,模糊的距离,阴影的颜色)
  • CSS3  文本溢出省略号
    1. 文本不换行   white-space: nowrap;
    2. 多余的部分隐藏掉  overflow: hidden;
    3. 修剪文本  text-overflow: clip;
    css3  边框
    1. 圆角
    • border-radius:25px;四个角圆角
    • border-radius:50%;若是正方形,则为圆
    • border-radius:25px 20px 15px 10px;左上、右上、右下、左下
  • 边框图片
    • border: 30px solid blue;
    • border-image:url(border.png) 30 30 round; 
    • repeat平铺 stretch拉伸  round填充
    • 中间两个数是规定图像边框的向内偏移(宽度)
  • 盒子阴影
    • box-shadow:(水平阴影,垂直阴影,模糊的距离,阴影的颜色);
    CSS3框大小   box-sizing
    • box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。(添加在父元素)
    • box-sizing:border-box;   确定盒子大小,包括内边距和边框,自适应宽和高。
    • box-sizing:content-box;  确定盒子大小,包括边框,自适应宽和高。
    • resize 属性指定一个元素是否应该由用户去调整大小 horizontal 水平可调节 vertical垂直   both水平垂直均可

    css3 阴影、图片边框、边框大小

    上一篇:手把手教你全家桶之React(二)


    下一篇:.NET Core SameSite cookie问题