CSS（三）元素的修饰、背景设置

目录

一、元素的修饰

1. 圆角——border-radius

2. 盒子阴影——box-shadow

3. 光标的设置

4. 元素特有样式

二、背景

一、元素的修饰

1. 圆角——border-radius

        CSS中，任何元素都有四个角：

        圆角的取值：

        1个值：四个角相同
        2个值：左上右下、左下右上
        3个值：左上、右上左下、右下    
        4个值：左上、右上、右下、左下(顺时针)

  

   

    

     

    
    

     

      border-radius: 10px;
     
    
   

    

     

    
    

     

      border-radius: 10px 20px;
     
    
   

    

     

    
    

     

      border-radius: 9px 5px 3px;
     
    
   

    

     

    
    

     

      border-radius: 3px 10px 20px 30px;
     
    
  
 

2. 盒子阴影——box-shadow

        格式：box-shadow: x轴偏移 y轴偏移 羽化 扩展 颜色 内外阴影(可选,默认向外)

• 第一、二个值： x 轴上的偏移量和y轴上的偏移量（正负值）
• 第三个值：模糊半径的大小（羽化）不允许负值
• 第四个值：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小
• 第五个值：颜色值
• 第六个值：阴影向内 inset：默认阴影向外扩散

box-shadow: 3px 5px 5px 1px green inset;
 

3. 光标的设置

4. 元素特有样式

（1）表单轮廓 outline

        格式：outline:width style color; 该属性常用与清空轮廓线。

  

   

    

     

    
    

     

      outline: none;
     
    
   

    

     

    
    

     

      outline: 0;
     
    
  
 

（2）列表样式 list-style

二、背景

1. 背景颜色  background-color: 颜色色值;

2. 背景图片  background-image: url(路径);

        路径可以是绝对路径或者相对路径,注意外部 css 的路径，背景图必须要求元素具有宽度和高度。

背景图和img的区别：

• img具有尺寸，不设置宽度高度，可以直接显示
• 背景图必须设置宽度和高度
• img图片不可直接写文字，除非在img盒子外部定位
• 背景图是可以在图片上写文字，背景图其实和颜色一样
• img一般用于产品展示，可以根据素材更新
• 背景图一般左大背景或者更新小图标

3. 背景图平铺

        如果宽高大于图片大小，图片会重复显示；如果宽高小于图片大小，图片会显示不全。

4. 背景图定位  background-position

        背景图定位取值可以是关键词，也可以为正值和负值，正值向右移动负值向左移动。

5. 背景图尺寸  background-size

        在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值background-size:x轴拉伸 y轴拉伸;

        注意在设置大图背景时最好限制最低宽度，这样低于预定宽度时就会出现横向拖拽条保证图片和内容显示完整。

6. 简写

        格式：background:color image repeat position;  四组值用空格分开,没有顺序；举例：

  

   

    

     

    
    

     

      .uname {
     
    
   

    

     

    
    

     
   background-image: url(./img/yhm.png);
     
    
   

    

     

    
    

     
   background-repeat: no-repeat;
     
    
   

    

     

    
    

     
   background-position: right;
     
    
   

    

     

    
    

     
   background-size: auto;
     
    
   

    

     

    
    

     
   background-size: auto 100%;
     
    
   

    

     

    
    

     

      }
     
    
  
 

简写后：

  

   

    

     

    
    

     

      .uname {
     
    
   

    

     

    
    

     

         background: url(./img/yhm.png) no-repeat right/auto 100%;
     
    
   

    

     

    
    

     

      } 
     
    
  
 

文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。

原文链接：majinjian.blog.csdn.net/article/details/119803642