zoukankan      html  css  js  c++  java
  • css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))

    1.圆角边框  border-radius

     border-radius 属性用于设置元素的外边框圆角

     语法:border-radius:length;

      参数值可以是数值 或者 百分比 的形式

      正方形,数值设置宽或高的一半,或者 50%;

      矩形,数值设置高度的一半

    2.盒子阴影 box-shadow

      box-shadow:水平阴影的位置   垂直阴影的位置  模糊距离  阴影尺寸  阴影颜色  外部阴影

       模糊距离:影子的虚实

       阴影尺寸:影子大小

      注意:

       1.默认值外阴影(outset),但是不可以写这个单词,否则导致阴影无效

       2.盒子阴影不占用空间,不会影响其他盒子排列

    3.文字阴影 text-shadow

      box-shadow:水平阴影的位置   垂直阴影的位置  模糊距离  阴影颜色 ;

    4. 背景颜色  background-size

      background-size: 背景图片宽度    背景图片高度;

      background-size:500px  200px  /  50%  / cover  / contain;   //

      1. 如果只写一个参数  肯定是宽度,高度则被省略了,会等比例缩放

      2. 里面的单位可以跟 %  相对于父盒子来说的

      3. cover 等比例拉伸  要完全覆盖 盒子   可能有部分背景图片显示不全

      4. contain  高度和宽度等比例拉伸,当宽度 或者高度 铺满div 盒子就不再进行拉伸了,可能有部分空白区域

       

  • 相关阅读:
    hudson搭建经验总结(二)
    CodePen最佳实例分享
    hudson搭建经验总结
    资料文件夹管理系统
    ueditor+word图片上传
    asp.net上传大文件
    UEditor粘贴word
    大文件上传组件
    文件资源管理系统
    ueditor+复制word图片粘贴上传
  • 原文地址:https://www.cnblogs.com/qtbb/p/11729357.html
Copyright © 2011-2022 走看看