css3新增选择器+属性

最新推荐文章于 2023-03-11 16:24:07 发布

海阔天空ZMZ

最新推荐文章于 2023-03-11 16:24:07 发布

阅读量386

点赞数

分类专栏： HTML+CSS 基础文章标签： CSS3 新增选择器属性

本文链接：https://blog.csdn.net/weixin_45457515/article/details/98308205

版权

HTML+CSS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

基础

10 篇文章 0 订阅

订阅专栏

1：c3属性前缀

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。

chrome 、Safiri 浏览器： -webkit-

FireFox : -moz-

IE: -ms-

opera : -o-

先写标准的CSS3属性,在写css3属性

2：c3选择器

(1)毗邻选择和兄弟选择器

/* E1 +  E2   毗邻选择器   E 代表元素   fun: 选择所有符合条件的 ---》 和E1紧紧相邻的E2元素 (下一个兄弟)
    p1 p3
    */
    .box + p {
        font-size: 40px;

    }
    /* ~ 相邻    E1 ~ E2 选择所有符合条件的在E1后的所有相邻E2元素  */
    .box ~ p {
        color: red;
    }
    
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <p>我是p元素1</p>
    <p>我是p元素2</p>

    <div class="box"></div>
    <p>我是p元素3</p>
</body>

(2)属性选择器

[class] fun:选择拥有class属性的元素
[class=“a”] fun": 选择所有class属性值为a的元素
[ class^=“a”] fun: 选择符合条件class以a字符作为开头属性值的元素
[class*=“a”] fun: 选择的是class属性值包含a字符的元素
[class$=“a”] fun: 选择符合条件class以a字符作为结尾属性值的元素

(3)结构伪类选择器

E:first-child 选择的是E的父元素中的第一个孩子并且要求这个孩子是E类型的如果不是查找失败如果是成功
E:nth-child(n) n是从0开始的正整数 n>=0 -n+3 前三个 n+6 后几个 2n+1奇数行 2n偶数行
E:last-child 选择的是E的父元素中的最后一个孩子并且要求这个孩子是E类型的如果不是查找失败如果是成功
E:first-of-type 匹配E的父元素中的第某个E类型的元素不会出现失败的情况
E:last-of-type
E:nth-of-type(n)

3：c3常用属性

背景属性

1:多背景属性一个背景盒子可以同时放置多张背景图

background-image:url(),url(),url();
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: top left,right top, right bottom;

2:背景尺寸

background-size: px / % / cover /contain ;
background-size:50px 50px ;宽和高50*50
background-size:100%  100% ;铺满整个盒子 以盒子作为参考  不会发生溢出
完整显示图片 不会丢失内容

cover:铺满盒子 但是有时候会不完整显示图片内容   
contain: 保证图片完整显示  但是背景盒子会流出空白区域

在这里插入图片描述

1:二倍图设置大小时不要写% %是以当前插入的小图标的盒子作为参考的 px

2: 必须把图标的位置值也减半

3:背景初始放置位置(区域) (盒模型)

background-origin:border-box边框部分/padding-box 内边距/content-box 内容

4:背景的裁剪区域clip : 裁剪掉隐藏掉

background-cilp: border-box边框部分/padding-box 内边距/content-box 内容

content-box 溢出内容区域切掉

5:背景渐变

 /* 背景属性 background:颜色 路径 平铺  位置  是否滚动 scroll(默认)/fixed 不滚动
        (1)background-color:# red rgba()
        (2)background-image:url()
        (3)background-repeat: repeat / no-repeat 
        (4)background-position: left  right top bottom left top / px px / % % 
        (5)background-attachment: scroll/fixed
         */

         /* 
         css3 
         1：多背景属性  功能：插入多张背景  background-image:url(),url(),url();
         2：背景图片放置位置 (内边框 边框 内容)
         background-origin:padding-box content-box border-box;   [ˈɔːrɪdʒɪn]
         3:背景尺寸
         background-size: wpx hpx/ % % 以背景盒子作为参考  / cover /contain ;
         cover:铺满 但是会显示不完整
         contain:完整显示 但是会留白 



         4:背景裁剪区域 background-clip:padding-box content-box border-box;


         5:背景渐变

         
          */
          /* background-image: url("../images/01.gif"),url("../images/02.gif"),url("../images/03.gif");
          background-repeat: no-repeat;
          background-position: left top, right bottom , center center ; */
      

          background-image: url('../images/01.gif');
          background-repeat: no-repeat;
          /* 背景图片的尺寸---》适应 背景盒子大小 */
          background-size:cover;
          background-origin:content-box;
          /* 溢出边框的背景裁减掉 */
          background-clip:content-box;



    }

背景渐变属性 background-image

线性渐变

在这里插入图片描述

(1)线性渐变

   线性渐变属性 banckground: linear-gradient(方向，颜色1 停止位置1 ,颜色2 停止位置2....)
          方向：  to left -90deg
                 to right +90deg
                 to bottom +180deg
                 to top 0deg
                135deg 左上角到右下角
                45deg 从左下角到右上角

重复线性渐变

background: repeating-linear-gradient(-45deg, red 10%,yellow 20%);

（2）径向渐变

   <style type="text/css">
        .bg{
          width: 260px;
          height: 260px;
          
          /* 设置多个渐变背景图， 使用逗号分隔 */
          background-image:
              radial-gradient(transparent 10%, #ccc 15%, #ccc 20%, transparent 100%),
              radial-gradient(35px 35px, transparent 10%, #aaa 15%, #aaa 20%, transparent 100%);
          background-color: #eee;
          background-size: 60px 60px,10px 10px;
        }
        </style>
</head>
<body>
        <div class="bg"></div>
</body>

重复径向渐变

<style>
    .box {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        margin: 0 auto;
        /* background: radial-gradient(circle  farthest-corner at 100px 50px  , blue ,red) */
        /* background: radial-gradient(ellipse closest-corner at center center , yellow 20% ,red 50%); */
   
        background: repeating-radial-gradient(farthest-side at 40px 50px ,#fff 10% ,#000 20%)
    }
    /* (形状 大小 坐标,颜色)  */
    </style>
</head>
<body>
    <!-- 径向渐变  background:radial-gradient() 
    (1)形状  圆形 circle （默认） 椭圆  ellipse 
    当盒子是正方形时候circle 和ellipse是一样的形状 都是圆形
    在长方形的时候 circle圆形渐变 ellipse 椭圆形的渐变
    (2) 大小 size（停止位置）     
                     closest-corner 最近的角
                     closest-side 最近的边
                     farthest-corner 最远的角(默认值)
                     farthest-side 最远的边
    (3)径向的中心位置 at position  30px 40px   默认在中心点 起始位置 
    
    (4)颜色 停止位置
    -->


    <div class="box"></div>

新盒模型

*盒模型宽度 = width 不用内减 width包含padding和border

box-sizing:border-box;//声明新盒模型
box-sizing: content-box //声明旧盒模型

css3 属性适合现在的高版本浏览器 ie10+ 适用在移动端

PC端界面还是要使用旧盒模型

div {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    
    
    
}

海阔天空ZMZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3新增选择器+属性

1：c3属性前缀CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。chrome 、Safiri 浏览器： -webkit-FireFox : -moz-IE: -ms-opera : -o-先写标准的CSS3属性,在写css3属性2：c3选择器(1)毗邻选择和兄弟选择器/* E1 + E2 毗...
复制链接

扫一扫