CSS3边框、圆角、盒阴影、背景

最新推荐文章于 2023-03-17 11:33:24 发布
最新推荐文章于 2023-03-17 11:33:24 发布
阅读量302 收藏 3
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61843988/article/details/125915845
版权

一、圆角

1、border-radius 属性

border-radius属性定义元素角的半径

border-radius属性实际上是以下属性的简写属性：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

2、border-radius - 指定每个圆角

  • 四个值：左上 右上 右下 左下
  • 三个值：左上 右上和左下 右下

  • 两个值：左上和右下 右上和左下

  • 一个值：可以应用所有四个角

四个值 - border-radius: 15px 50px 30px 5px:

三个值 - border-radius: 15px 50px 30px:

 

两个值 - border-radius: 15px 50px:

 

 一个值 - border-radius: 15px:

3、border-radius - 创建椭圆角

椭圆边框 - border-radius: 30px / 60px:

 椭圆边框 - border-radius: 60px / 30px:

 椭圆边框 - border-radius: 50%:

 

二、盒阴影

CSS3中的box-shadow 属性被用来添加阴影:

box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(阴影大小) 阴影颜色 内/外阴影

说明:前两个值必须写，模糊值不能为负值

<style>
    .div-0{
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
        box-shadow: 10px 10px 5px black;
    }
</style>
<div class="div-0"></div>

使用box-shadow制作水晶球：

<style>
    .div-1{
            width: 100px;
            height: 100px;
            background-color: #9c88ff;
            border-radius: 50%;
            /* inset 内阴影 */
            /* 同时给元素设置内外阴影 */
            box-shadow: 7px 10px 5px rgba(255, 255, 255, 0.3) inset,7px 5px 5px rgba(0, 0, 0, 0.5);
    }
</style>
<div class="div-1"></div>

三、边界图片

  • border-image-source:边框背景图片路径
  • border-image-slice:图片边框向内偏移(切片)
  • border-image-width:图片边框的宽度
  • border-image-outset:边框图像区域超出边框的量
  • border-image-repeat:图片边框是否应该平铺(repeat)/铺满(round)/拉伸(stretch)(针对切片图像)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1{
            width: 200px;
            height: 100px;
            /* 给元素设置透明色的边框 transparent：透明 */
            border: 15px solid transparent;
            /* 设置边框图片 */
            border-image: url(img/border.png) 27 27 round;
        }
        .div-2{
            width: 200px;
            height: 100px;
            /* 给元素设置透明色的边框 transparent：透明 */
            border: 15px solid transparent;
            /* 设置边框图片 */
            border-image: url(img/border.png) 27 27 repeat;
        }
        .div-3{
            width: 200px;
            height: 100px;
            /* 给元素设置透明色的边框 transparent：透明 */
            border: 15px solid transparent;
            /* 设置边框图片 */
            border-image: url(img/border.png) 27 27 stretch;
        }
    </style>
</head>
<body>
    <div class="div-1">铺满round</div>
    <div class="div-2">平铺repeat</div>
    <div class="div-3">拉伸stretch</div>
</body>
</html>

四、背景

1、background-image属性

background-image 属性为元素设置背景图像

值描述
url()图片的路径
none默认值。不显示背景图像
inherit规定应该从父元素继承background-image属性的设置

案例： 

 示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1{
            width: 700px;
            height: 320px;
            border: 1px solid red;
            background-image: url(img/flower.gif),url(img/paper.gif);
            background-position: right bottom,left top;
            background-repeat: no-repeat,repeat;
        }
        h2{
            text-align: center;
        }
        p{
            text-indent: 2rem;
        }
    </style>
</head>
<body>
    <div class="div-1">
        <h2>学历职业教育与非学历职业教育“两开花”</h2>
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
        <p>2021年职业教育行业重磅政策频出，职业教育教育各细分板块的政策导向逐步明晰。传匀邦认为，随着多项职业教育利好政策颁布，在政策需求、市场需求和个人成长需求的共同推动木，+职业教育在未来将发生巨大的变化。</p>
    </div>
</body>
</html>

2、background-size属性

background-size 属性规定背景图像的尺寸。

值描述
length

设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

案例：

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1{
            width: 400px;
            height: 320px;
            border: 1px solid red;
            background: url(img/flower.gif) no-repeat;
            background-size: contain;
        }
        p{
            text-indent: 2rem;
        }
    </style>
</head>
<body>
    <div class="div-1">
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
    </div>
</body>
</html>

3、background-origin属性

background-origin属性指定了背景图像的位置区域。

值描述
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。

案例：

 

 示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1,.div-2,.div-3{
            width: 400px;
            height: 320px;
            float: left;
            padding: 40px;
            border: 20px solid rgba(255, 0, 0, 0.257);
            background: url(img/flower_small.gif) no-repeat;
        }
        .div-1{
            /* border-box:将背景图片放在边框上 */
            background-origin: border-box;
        }
        .div-2{
            /* padding-box:将背景图片放在内边距上 */
            background-origin: padding-box;
        }
        .div-3{
            /* content-box:将背景图片放在内容上 */
            background-origin: content-box;
        }
        p{
            text-indent: 2rem;
        }
        /* background-origin 属性指定了背景图像的位置区域 */
    </style>
</head>
<body>
    <div class="div-1">
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
    </div>
    <div class="div-2">
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
    </div>
    <div class="div-3">
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
    </div>
</body>
</html>

4、background-clip属性

background-clip背景剪裁属性是从指定位置开始绘制。

值描述
border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box背景绘制在衬距方框内（剪切成衬距方框）。
content-box背景绘制在内容方框内（剪切成内容方框）。

案例：

 示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1,.div-2,.div-3{
            width: 400px;
            height: 300px;
            float: left;
            padding: 40px;
            border: 20px solid rgba(255, 0, 0, 0.257);
            background-color: antiquewhite;
        }
        .div-1{
            /* border-box:将背景图片放在边框上 */
            background-clip: border-box;
        }
        .div-2{
            /* padding-box:将背景图片放在内边距上 */
            background-clip: padding-box;
        }
        .div-3{
            /* content-box:将背景图片放在内容上 */
            background-clip: content-box;
        }
        p{
            text-indent: 2rem;
        }
        /* background-clip 背景裁剪属性是从指定位置开始绘制 */
    </style>
</head>
<body>
    <div class="div-1">
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
    </div>
    <div class="div-2">
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
    </div>
    <div class="div-3">
        <p>职业教育作为以就业为导向的教育类型，其目的在于培养更适应社会发展的人才。而从导向上来看，政策也更倾向于鼓励、支持和引导职业教育和高等教育发展。根据是否颁发学历证书，可以将中国职业教育体系分为学历职业教育和非学历职业教育两类。前者包含中等职业教育及高等职业教育，以公办院校为主民办院校为辅，后者根据培训目的不同，分为企业管理培训（如财务、人力资源管理等)、职业技能培训(如IT类、语言类等)和职业考试培训(如公考、教职、财会司法及医护等),以民办机构为主。</p>
    </div>
</body>
</html>

小媛同学.，
关注
前端面试题-url、href、src
weixin_33725270的博客
03-20 3591
一、URL的概念 统一资源定位符（或称统一资源定位器/定位地址、URL地址等，英语：Uniform Resource Locator，常缩写为URL），有时也被俗称为网页地址（网址）。如同在网络上的门牌，是因特网上标准的资源的地址（Address）。 二、URL的格式 2.1 标准格式 协议类型:[//服务器地址[:端口号]][/资源层级...
CSS3 边框、圆角、背景
最新发布
corlin6688的博客
11-09 702
border-radius属性的值可以有1~4个值：四个值（第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角）；CSS3中包含几个新的背景属性，提供更大背景元素控制：background-image、background-size、background-origin、background-clip。一些最重要的CSS3模块如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。3）、background-origin属性指定背景图像的位置区域。
href和src的区别
05-31
href和src的区别
url、src、href的区别
Mgf_Yzy的博客
03-17 730
url、src、href的区别
css 实现背景图片拉伸
dxh_0829的专栏
08-19 1534
使用css3 属性：background-size background-size：cover   即可实现像桌面壁纸一样拉伸 以下是w3c上面的解释： 语法 background-size: length|percentage|cover|contain; 值 描述   length 设置背景图像的高度和宽
url,href,src区分
huntererer的博客
02-07 641
写代码，上网的时候经常会用到url,href和src来将其他资源引入，那么它们三个分别表示什么呢？ 1.URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。格式一般为： 协议://用户名:密码
css3圆角边框和边框阴影示例
09-25
在本文中，我们将深入探讨两个重要的CSS3特性：圆角边框（border-radius）和边框阴影（box-shadow）。 首先，让我们来看看CSS3的圆角边框。在之前的CSS版本中，创建圆角边框需要使用复杂的图片或者JavaScript来实现...
CSS3圆角边框和边界图片效果实例
09-24
CSS3圆角边框和边界图片效果实例这篇文档主要讲解了CSS3中的圆角边框效果、盒阴影效果以及如何通过图片制作边框的技巧。这些知识点在现代网页设计中非常实用，能够让网页的边框设计更加丰富和有创意。下面是对这些...
CSS3边框、阴影及背景
karry_yuan的博客
04-04 1376
CSS3边框、圆形、盒子阴影及背景
使用CSS3实现圆角,阴影,透明
09-25
- **边框半径法**：CSS3的`border-radius`属性允许直接设置元素的四个角的圆角半径。这比背景图像法更为直接且易于维护。 ```css .box { border-radius: 1em; } ``` 为了获得跨浏览器兼容性，你需要为Firefox...
src、href和url含义及区别
weixin_41715020的博客
11-14 5519
src、href和url含义及区别
src 与 href 属性的区别以及 url 的概念
码飞_CC的博客
12-28 1716
src 与 href 属性的区别以及 url 的概念
url、src、herf的区别
qq_45994622的博客
03-21 1927
1.url：统一资源定位符 互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它 结构 基本URL包含协议、服务器名称（IP地址）、路径和文件名，如：“协议://授权/路径?查询”。 完整的、带有授权部分的普通统一资源标识符语法如下：“协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志” 第一部分： 协议/模式：告诉浏览器如何处理将...
JavaScript在发送Ajax请求时，URL的域名地址是使用绝对地址还是相对地址
Q1368089323的博客
11-07 366
一、URL域名的绝对地址与相对地址 1.URL简述 Uniform Resource Locator 统一资源定位符 例如：http://www.123.com/infor/index.html 一个URL的四个构成部分： 第一部分：协议，比如：http:// 第二部分：域名（或者称为主机名、服务器名），如：www.123.com 第三个部分：文件夹，如：infor 第四个部分：文件名，如：index.html 在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念： （2）U
url，src，href的区别
weixin_45803556的博客
12-05 613
url 1.首先就是url的定义 url：“统一资源定位符（URL）是Internet上标准资源的地址。URL指示资源的位置以及用于访问它的协议。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的具体位置。 1.绝对url： ...
关于url、src、href的区别
weixin_42125762的博客
03-30 3086
关于url、href、src的区别 href、src、URL 都是用来引用的，还有CSS中的url（）函数，看似他们完成的工作相同，但仔细分析是有区别的，了解他们的区别可以帮助我们更好的设计网页。 RUL： Uniform Resource Locators 统一资源定位符的简写，浏览器通过URL向web服务器发出请求。 src： src是source的缩写，表示引入文件，目的是使文件加...
background:rgba()
热门推荐
Clownfishl的博客
03-12 2万+
RGBA
url,src和href的区别
xiaozhuzhuyang的博客
02-24 480
url,src和href的区别 URL(Uniform Resource Locator) 统一资源定位符。 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 结构： 模式（或称协议） +服务器名称（IP地址）、路径和文件名 例如：http://localhost:8080/login 带有授权部分的普通统一资源标识符。 href 表示超文
简单介绍一下url、href、src到底是什么？
Maybe_ss的博客
11-20 896
一、URL的概念 统一资源定位符（或称统一资源定位器/定位地址、URL地址等，英语：Uniform Resource Locator，常缩写为URL），有时也被俗称为网页地址（网址）。如同在网络上的门牌，是因特网上标准的资源的地址（Address）。 二、URL的格式 2.1 标准格式 协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询 2.2 完整格式 ...
CSS3必知10大命令：边框圆角与盒阴影
这些命令包括边框圆角、盒阴影、文本阴影等，使得网页元素的样式更加丰富和精致。 1. 边框圆角（Border Radius） 在CSS3中，通过`border-radius`属性可以轻松实现元素边框的圆角效果，告别以往使用图片或复杂CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值