CSS3补充

最新推荐文章于 2024-04-26 19:17:54 发布
原创 最新推荐文章于 2024-04-26 19:17:54 发布 · 216 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

文章目录

一、透明度的表示方式

代码示例如下：

<style>
        *{margin: 0;padding: 0;}
        div.box{
            width: 200px;
            height: 200px;
            background-image: url(../images/15.jpg);
            margin: 100px;
            padding: 100px;
            float: left;
        }
        /* rgba */
        .box:first-child div{
            width: 200px;
            height: 200px;
            /* .1表示透明度为0.1 */
            background-color: rgba(0,0,255,.1);
        }
        /* opacity */
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;

            opacity: .3;/* 不兼容IE */
            filter: alpha(opacity=30);/* 兼容IE的写法 */
        }
        /* transparent 完全透明  opacity=0 */
        .box:nth-child(3) div{
            width: 200px;
            height: 200px;
            background-color: transparent;
        }
    </style>

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

    <div class='box'>
       <div class="box2">opacity</div>
    </div>
    <div class="box">
        <div>transparent</div>
    </div>
</body>

结果如下：
在这里插入图片描述

二、圆角属性

代码示例如下：

    <style>
        *{margin: 0;padding: 0;}
        div{
            width:200px;
            height:200px;
            background:#ccc;
            border: 1px solid black;
            margin:50px;
            float:left;
            line-height:200px;
            text-align: center;
        }
        /* 普通圆角 */
        div:first-of-type{
            border-radius: 20px;
        }
        /* 淘宝圆角 */
        div:nth-of-type(2){
            /* 顺时针 */
            border-radius: 20px 0 0 0;
        }
        /* 递增圆角 */
        div:nth-of-type(3){
            border-radius: 10px 20px 30px 40px;
        }
        /* 对角线圆角 */
        div:nth-of-type(4){
            border-radius: 20px 0 20px 0;
        }
        /* 上圆角 */
        div:nth-of-type(5){
            border-radius: 20px 20px 0 0;
        }
        /* 下圆角 */
        div:nth-of-type(6){
            border-radius: 0 0 20px 20px;
        }
        /* 圆 */
        div:nth-of-type(7){
            border-radius: 50%;
        }
        /* 单个圆角 */
        div:nth-of-type(8){
            border-top-left-radius: 10px;/* 左上角 */
            border-top-right-radius: 20px;/* 右上角 */
            border-bottom-left-radius: 30px;/* 右下角 */
            border-bottom-right-radius: 40px;/* 左下角 */
        }

    </style>

<body>
    <div>普通圆角</div>
    <div>淘宝圆角</div>
    <div>递增圆角</div>
    <div>对角线圆角</div>
    <div>上圆角</div>
    <div>下圆角</div>
    <div>圆</div>
    <div>单个角的设置</div>
</body>
</html>

结果如下：
在这里插入图片描述

三、圆角属性延伸

代码示例如下：

    <style>
        *{margin: 0;padding: 0;}
        div{
            width:100px;
            height:200px;
            background:#ccc;
            border: 1px solid black;
            margin:50px;
            float:left;
            line-height:200px;
            text-align: center;
        }
        /* 胶囊圆角 */
        div:first-child{
            border-radius: 51px;
        }
        /* 百分比圆角 */
        div:nth-child(2){
            border-radius: 20%;
        }
        /* 椭圆 */
        div:nth-child(3){
            border-radius: 50%;
        }
        img{
            border-radius: 50%;
        }
        button{
            width: 100px;
            height: 24px;
            border-radius: 10px;
            /* 
                outline （轮廓）是绘制于元素周围的一条线，
                位于边框边缘的外围，可起到突出元素的作用。
                可以按顺序设置如下属性：

                    outline-color
                    outline-style
                    outline-width
             */
            outline: 0 none;
        }
    </style>

<body>
    <div>胶囊圆角</div>
    <div>百分比圆角</div>
    <div>椭圆</div>
    <img src="../images/18.jpg"/>
    <button>按钮</button>
</body>
</html>

结果如下：
在这里插入图片描述

四、盒子阴影

代码是如下：

    <style>
         *{margin: 0;padding: 0;}
         div{
            width:200px;
            height:200px;
            background:orange;
            border: 1px solid black;
            margin:50px;
            float:left;
            line-height: 40px;
            text-align: center;
         }
         /* 
        box-shadow: 右 下 羽化值 延展 颜色
         */
         /* 水平方向的阴影 */
         div:first-child{
             box-shadow: 5px 0; /*5px阴影右边  -5px 左边*/
         }
         /* 垂直方向的阴影 */
         div:nth-child(2){
             box-shadow: 0 5px; /*5px阴影下边  -5px 上边*/
         }
         /* 右上方向的阴影 */
         div:nth-child(3){
             box-shadow: 5px -5px; 
         }
         /* 右下有阴影,加模糊程度 */
         div:nth-child(4){
             box-shadow: -5px 5px 20px; 
         }
         /* 右下有阴影,加模糊程度,比原本的盒子上下左右大10px */
         div:nth-child(5){
             box-shadow: -5px 5px 20px 10px; 
         }
         /* 右下有阴影,加模糊程度,比原本的盒子上下左右大10px 发红光  */
         div:nth-child(6){
             box-shadow: -5px 5px 20px 10px red; 
         }
         /* 内发光 */
         div:nth-child(7){
             box-shadow:inset 5px 5px 10px 10px red; 
         }
         /* 多个阴影 */
         div:nth-child(8){
             box-shadow:inset 5px 5px 10px 10px red,5px 5px 10px 10px yellow; 
         }
    </style>

<body>
    <div>水平方向的阴影</div>
    <div>垂直方向的阴影</div>
    <div>右上方向的阴影</div>
    <div>右下有阴影,加模糊程度</div>
    <div>右下有阴影,加模糊程度,比原本的盒子上下左右大10px</div>
    <div>右下有阴影,加模糊程度,比原本的盒子上下左右大10px 发红光 </div>
    <div>内发光</div>
    <div>多个阴影</div>
</body>
</html>

结果如下：
在这里插入图片描述

五、文本阴影

代码示例如下：

	<style>
        *{margin: 0;padding: 0;}
        p{
            font-style: 50px;
            margin: 100px auto;
            text-align: center;
            color: salmon;
            /* 语法:text-shadow: 右 下 羽化值 颜色 */
            text-shadow:  2px 2px 5px blue;
        }

    </style>

<body>
    <p>海阔凭鱼跃,天高任鸟飞</p>
</body>

结果如下：
在这里插入图片描述

六、自定义属性

代码示例如下：

    <button>获取图片的自定义属性</button>
    <button>修改图片的自定义属性</button>
    <img src="../images/20/1.jpg"  data-her-name="韩红" data-career="歌手"  alt="">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // 原生js写法
        // window.οnlοad=function(){
        //     //querySelectorAll和querySelector也是html5对js的扩展获取节点的方式
        //     var buttons = document.querySelectorAll("button")
        //     var img = document.querySelector("img")
        //     //获取自定义图片
        //     buttons[0].οnclick=function(){
        //         alert("姓名是："+img.dataset.herName+",职业："+img.dataset.career)
        //     }
        //     // 修改图片的自定义属性
        //     buttons[1].οnclick=function(){
        //         img.dataset.herName="路人甲";
        //         img.dataset.career="厨师";
        //     }
        // }

        // jQuery写法
        $(function(){
            $("button:nth-child(1)").click(function(){
                // :eq(0) 匹配一个给定索引值的元素 匹配第一个img
                console.log($("img:eq(0)").data());
                alert("歌手名"+$("img:eq(0)").data("herName")+":职业"+$("img:eq(0)").data("career"))
            })
            $("button:nth-child(2)").click(function(){
                $("img:eq(0)").attr("data-her-name","路人甲")
                $("img:eq(0)").attr("data-career","厨师")
            })
        })
    </script>

直接点击获取，结果如下：
在这里插入图片描述
点击修改按钮之后，再点击获取：
在这里插入图片描述

七、背景复习

 			 /* 背景颜色 */
             background-color:black;
             /* 背景图片 */
             background-image: url(../images/22/tianjin.jpg);
             /* 图片重复 */
             background-repeat: no-repeat;
             /* 图片居中 */
             background-position:center top;
             /* 背景附着  fixed  默认：scroll */
             /* 设置背景图像是否固定或者随着页面的其余部分滚动。 */
             background-attachment:fixed;

background-origin：
background-origin 属性规定 background-position 属性相对于什么位置来定位。
代码示例如下：


    <style>
        *{margin:0;padding:0}

        div{
            background-image:url(../images/23.jpg);
            background-repeat: no-repeat;
            background-position: left top;
            width:200px;
            height:200px;
            margin:50px;
            border:50px solid red;
            padding:50px;
        }
        /* 
          真实width= border  + width + padding = 100+200+100=400 
          内容width= padding + width  =  100 + 200 = 300
        */

        div:nth-child(2){
            background-origin: padding-box;
        }

        div:nth-child(3){
            background-origin: border-box;
        }

        div:nth-child(4){
            background-origin: content-box;
        }
    </style>

<body>
    <div></div>
    <div>背景相对于内边距进行定位</div>
    <div>background-origin:border-box</div>
    <div>background-origin:content-box</div>
</body>
</html>

结果如下;
在这里插入图片描述

八、背景裁切

代码示例如下：

<style>
        *{margin:0;padding:0}
        div{
           width:300px;
           height:200px;
           background-image: url(../images/24.jpg);
           border:20px dashed green;
           padding:50px;
           margin:50px;
        }
        div:nth-child(2){
            background-clip: border-box;
        }
        div:nth-child(3){
            background-clip: padding-box;
        }
        div:nth-child(4){
            background-clip: content-box;
        }
    </style>
    
<body>
    <div>默认的</div>
    <div>background-clip:border-box</div>
    <div>background-clip:padding-box</div>
    <div>background-clip:content-box</div>
</body>

结果如下：
在这里插入图片描述

九、背景大小

代码示例如下：

<style>
        *{margin:0;padding:0}

        div{
           width:300px;
           height:300px;
           border:1px solid black;
           margin:50px;
           float:left;
           background-image: url(../images/25.jpg);
           font-size:30px;
           color:green
        }

        div:first-child{
            background-size:auto auto;
            background-repeat: no-repeat;
        }

        div:nth-child(2){
            background-size:100px 100px;
            background-repeat: no-repeat;
        }

        div:nth-child(3){
            background-size:100% 100%;
        }

        div:nth-child(4){
            background-size:100% auto;
        }

        div:nth-child(5){
            background-size:auto 100%;
        }

        div:nth-child(6){
            background-size:cover;
        }

        div:nth-child(7){
            background-size:contain;
        }

    </style>

<body>
    <div>默认的</div>
    <div>background-size:100px 100px设置背景图片的大小</div>
    <div>background-size:背景图的高和宽是等于盒子的高和宽的</div>
    <div>background-size:100% auto</div>
    <div>background-size:auto 100%</div>
    <div>background-size:cover</div>
    <div>background-size:contain</div>
</body>

结果如下：
在这里插入图片描述

小召小召
关注
css3——基础知识补充
爱游戏爱学习的博客
04-26 441
css3补充知识
精选资源
CSS3悬停卡片重叠翻转特效
04-25
【CSS3悬停卡片重叠翻转特效】是一种在网页设计中常见的交互效果，它利用了CSS3的强大功能，特别是其3D变换和过渡效果，为用户提供了丰富的视觉体验。这种特效通常应用于卡片式布局的设计中，比如产品展示、团队成员...
css设置透明度的两种方法
热门推荐
weixin_44531304的博客
05-24 11万+
一、css rgba()设置颜色透明度 语法： rgba（R,G,B,A）; RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。 rgba（)里的值的介绍： R：红色值。正整数 （0~255） G：绿色值。正整数 （0~255） B：蓝色值...
CSS 颜色设置透明度的新姿势
W3cplus
06-05 2064
在 CSS 中，我们有很多种方式为元素设置透明度，常见的是给元素设置透明度和给颜色设置透明度，不同的方式将会带来不一样的效果。那么今天，我们就一起来聊聊 CSS 中的不透明度。感兴趣的同学，请继续往下阅读。设计中的透明度我们先从设计中开始。就拿 Figma 这样的设计软件来举例。设计师在给一个对象设置透明度，往往会有以下几种方式：这两种方式中，第一种就是给整个对象（或图层）设置opacity，...
CSS中设置透明度的2个属性：opacity，RGBA以及它们的区别
u013179804的博客
04-26 7796
透明度在网页设计中扮演着重要的角色，透明度的合理运用可以提升网页设计的美感和功能性，增强用户体验，突出重点内容，同时也为设计师提供了更多的创作空间和可能性。那我们一起来看看吧。
CSS 透明度设置方法及常见问题解析
sleepwalker_1992的专栏
06-19 2799
怎样在CSS样式中设置背景的透明度看看下面的CSS： img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。IE8和早期版本使用滤镜：...
懒加载与预加载
旗鼓相当的对手的博客
06-24 677
懒加载与预加载的基本概念。 懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 懒加载的意义及实现方式有： 意义： 懒加载的主要目的是作为服...
CSS3补充案例学生.zip
最新发布
06-27
CSS3补充案例学生.zip
精选资源
《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践
01-11
CSS3（Cascading Style Sheets Level 3）是CSS的最新版本，它扩展了样式表的功能，允许更精细的布局控制和视觉效果。 1. **选择器增强**：CSS3引入了更多的选择器，如类选择器、属性选择器、伪类和伪元素，使得样式...
CSS3样式表- 框模型之补充.pptx
05-06
本篇主要关注CSS3中的框模型及其补充部分，包括轮廓（Outline）和溢出（Overflow）的管理。 框模型是CSS布局的核心概念，它定义了元素在页面上占据的空间，包括内容区域、内边距、边框和外边距。框模型的扩展——...
2020-10-23
NYHongHong的博客
10-23 1244
懒加载 1.什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2.为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。 3.懒加载的原理是什么
今日笔记总结
weixin_49766373的博客
07-22 301
脱离了文档流，不脱离文本流，半脱离。
css样式中关于透明度的设置
youngjqz的博客
04-18 2002
今天在写dialog对话框组件时,给外面 的父元素设置了透明度,但是影响到内部的子元素,查了资料找到了原因以及解决办法; 设置父元素opacity：0.4，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.4的透明度。即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.4的基础上设置的，因此子元素的opacity还是0.4。 ...
前端优化之懒加载和预加载
qq_45716607的博客
06-14 3616
转自http://www.jianshu.com/p/4876a4fe7731 一懒加载 1.什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 2.为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页
图片懒加载
licuicui5201的博客
08-17 2692
一、懒加载原理 1.1 原理 先将img标签的src链接设为同一张图片，然后给img标签设置自定义属性（比如 data-original），然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，达到懒加载的效果。 1.2 目的 这样做能够避免页面一次性向服务器发送大量请求，导致服务器响应变慢，最终导致页面卡顿、崩溃等现象。 二、代码实现 2.1 实现步骤 将img标签内的src属性修改为data-original， 给img标签添加
css样式RGBA 透明度
得已
06-23 2万+
正常input显示为白色 /* 将文本透明 */    background: rgba(255, 255, 255, 0.11);.new-account-form input[type="text"], .new-account-form input[type="password"] { outline: none; font-size: 14px; letter-spacing: 1px; ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
qq_45802159的博客
11-23 797
文章目录定位静态定位（static）相对定位（relative）绝对定位（absolute）固定定位（fixed）设置元素的层叠顺序表单设置光标样式透明度opacity属性定义元素的不透明度IE的半透明滤镜外边线作业 定位 定位相关属性用于设置目标组件的位置，常用的定位相关属性如下。 属性 说明 值 position 设置定位方法 static、relative、absolute、...
面试准备之css篇
youzaiyouzai110的专栏
09-19 403
1.盒子模型 了解box的两种模式 CSS3 box-sizing    定义 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准；  定义 box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6 相同； 好处：IE 对于盒模型的解释固然不符合 W3C 的规范，但是也有它的好处：无论如何改动 borde
CSS设置背景透明度
美奇软件开发工作室
04-16 8万+
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法：css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)IE专属滤镜filter:Alpha(opacity=x)，x 的取值从 0 到 100，如fil...
HTML5与CSS3深度解析
CSS3作为HTML5的补充，带来了许多增强视觉效果的新功能，如多列布局、边框半径、阴影、渐变、过渡、动画等。此外，CSS3还引入了媒体查询（Media Queries），使得网页可以响应不同的设备屏幕尺寸，实现更好的响应式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值