【CSS 22】圆角 椭圆角 边框图像 多重背景 背景尺寸 全尺寸背景图像 Hero Image background-origin属性 background-clip属性

最新推荐文章于 2024-02-21 18:20:40 发布
最新推荐文章于 2024-02-21 18:20:40 发布
阅读量627 收藏 2
点赞数 1
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62629457/article/details/131570793
版权

CSS

说在前面

转眼间我们已经学习了CSS的基础教程以及中级教程，掌握了基本的语法以及各种拥有功能的属性样式，同时了解了定位布局特异性等知识，而现在我们来到了高级教程的学习，继续加油吧！

圆角

通过 CSS border-radius 属性，可以实现任何元素的圆角样式

<!--
border-radius 属性实际上是以下属性的简写属性
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
-->
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
	border-radius: 25px;
	background: #73AD21;
	padding: 20px;
	width: 200px;
	height: 150px;
}

#rcorners2 {
	border-radius: 25px;
	border: 2px solid #73AD21;
	padding: 20px;
	width: 200px;
	height: 150px;
}

#rcorners3 {
	border-radius: 25px;
	background: url(/i/paper.jpg);
	background-position: left top;
	background-repeat: repeat;
	padding: 20px;
	width: 200px;
	height: 150px;
}

</style>
</head>
<body>

<h1>border-radius 属性</h1>

<p>拥有指定背景颜色的元素圆角</p>
<p id="rcorners1">Rounded corners!</p>
<p>拥有边框元素的圆角</p>
<p id="rcorners2">Rounded corners!</p>
<p>拥有背景图片元素的圆角<p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>

指定四角
border-radius 属性可以接受一到四个值
规则如下：
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）

椭圆角

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

边框图像

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框
属性有三部分：

  1. 用作边框的图像
  2. 裁切图像的位置
  3. 定义中间的部分需要重复还是拉伸

border-image 属性接受图像，并将其切成九部分，就像井字游戏板
然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分

注意：为了使 border-image 起作用，该元素还需要设置 border 属性

/*重复图像的中间部分以创建边框*/
#borderimg {
	border: 10px solid transparent;
	padding: 15px;
	border-image: url(border.png) 30 round;
}

/*图像的中间部分被拉伸以创建边框*/
#borderimg {
	border: 10px solid transparent;
	padding: 15px;
	border-image: url(border.png) 30 stretch;
}

/*
border-image 属性实际上是以下属性的简写属性
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
*/

多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像
不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者
下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
	background-image: url(/i/photo/flower.gif), url(/i/paper.jpg);
	background-position: right bottom, left top;
	background-repeat: no-repeat, repeat;
	padding: 15px;
}
</style>
</head>
<body>

<h1>多重背景</h1>
<p>下面的 div 元素有两幅背景图像</p>

<div id="example1">
	<h1>Welcome to Shanghai</h1>
	<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
	<p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>

</body>
</html>

多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定
下面的例子使用 background 简写属性（结果与上例相同）

#example1 {
	background: url(flower.gif) right	bottom no-repeat, url(paper.gif) left top repeat;
}

背景尺寸
CSS background-size 属性允许您指定背景图像的大小
可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover
下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
	border: 2px solid hotpink;
	background: url(/i/photo/flower.gif);
	background-size: 100px 80px;
	background-repeat: no-repeat;
	padding: 15px;
}

#example2 {
	border: 3px solid hotpink;
	background: url(/i/photo/flower.gif);
	background-repeat: no-repeat;
	padding: 15px;
}
</style>
</head>
<body>
<h1>background-size属性</h1>
<p>调整大小之后的background-image:</p>
<div id="example1">
	<h2>Welcome to Shanghai</h2>
	<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
	<p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>

<p>background-image原始尺寸</p>
<div id="example2">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>

</body>
</html>

background-size 的其他两个可能的值是 contain 和 cover
contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）
这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）
这样，背景图像的某些部分可能在背景定位区域中不可见

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
	border: 2px solid hotpink;
	height: 120px;
	width: 150px;
	background： url(/i/photo/flower.gif);
	background-repeat: no-repeat;
	background-size: contain;
}

.div2 {
	border: 2px solid hotpink;
	height: 120px;
	width: 150px;
	background: url(/i/photo/flower.gif);
	background-repeat: no-repeat;
	background-size: cover;
}

</style>
</head>
<body>

<h1>background-size 属性</h1>

<h2>background-size: contain</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size 未定义：</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>原始图像</h2>
<img src="/i/photo/flower.gif" alt="Flowers" width="224" height="162">
</body>
</html>

定义多个背景图像的尺寸
在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）
下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
	background: url(/i/photo/tree.png) left top no-repeat, url(/i/photo/flower.gif) right bottom no-repeat, url(/i/paper.jpg) left top repeat;
	padding: 15px;
	background-size: 50px, 130px, auto;
}
</style>
</head>
<body>

<div id="example1">
	<h1>Welcome to Shanghia</h1>
	<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
	<p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>

</body>
</html>

全尺寸背景图像
现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口
具体要求如下

  1. 用图像填充整个页面（无空白）
  2. 根据需要缩放图像
  3. 在页面上居中图像
  4. 不引发滚动条
/*
下面的例子显示了如何实现它：使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）
然后在其上设置固定且居中的背景
最后使用 background-size 属性调整其大小
*/
html {
	background: url(img_man.jpg) no-repeat center fixed;
	background-size: cover;
}

body {
	color: white;
}

Hero Image

/*
还可以在 <div> 上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上
请注意，这项技术会将使图像响应：请调整浏览器窗口的大小来查看效果
*/
body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
	background: url(img_man.jpg) no-repeat center;
	background-size: cover;
	height: 500px;
	position: relative;
}

.hero-text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
}

background-origin 属性
CSS background-origin 属性指定背景图像的位置
该属性接受三个不同的值：

  1. border-box - 背景图像从边框左上角开始
  2. padding-box - 背景图像从内边距边缘左上角开始（默认）
  3. content-box - 背景图像从内容左上角开始

background-clip 属性
CSS background-clip 属性指定背景的绘制区域
该属性接受三个不同的值：

  1. border-box - 背景绘制到边框的外部边缘（默认）
  2. padding-box - 背景绘制到内边距的外边缘
  3. content-box - 在内容框中绘制背景
Zanebla
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在css3中background-clip属性与background-origin属性的用法介绍
12-13
困惑在哪里？ background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 比如，我们想要在边框上显示背景，我们可以使用background-origin帮我们实现（前提是边框要是透明的，不然它会覆盖住背景） 这里为了既体现出边框，又体现出边框中的背景，我特意使用了虚线的边框。(我是在chrome上做的demo,所以css3属性只使用了webkit前缀) 运行效果如下：
css3实现一个div设置多张背景图片及background-image属性实例演示
09-27
主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
解决使用border-image后border-radius不生效(使用background)
最新发布
2301_76742166的博客
02-21 1133
解决使用border-image后border-radius不生效(使用background)
CSS3之背景尺寸Background-size使用介绍
09-25
CSS3背景尺寸Background-size，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小，下面为大家详细介绍下其语法、浏览器兼容及使用示例，感兴趣的朋友不要错过
CSS3制作圆角、椭圆、梯形带图标的不规则按钮.rar
07-10
HTML5 CSS3制作的带图标的不规则按钮，这些不规则的形状其实是有规则的，像圆角、椭圆、梯形等，只不过是印象中比矩形的按钮稍微些，但是这些按钮应用在网页上，感觉很有个性哦，让人眼前一亮的感觉，按钮是带有图标的，图标是基于CSS生成的，鼠标放在按钮上，按钮会高亮显示。
CSS 使用border-radius属性实现标签元素变为正圆、椭圆、圆角矩形（可以自定义4个角的圆角大小）
热门推荐
旭东怪的博客
09-12 1万+
1 使用详解 border-radius 说明：给元素的边框设置圆角，默认不设置圆角为矩形，可以给元素设置圆角将元素变为正圆、椭圆或圆角矩形 语法： （1）border-radius：50%，给元素设置50%的圆角大小。 （2）border-radius：40% 30%，给元素的左上角、右下角设置40%的圆角大小，给元素的右上角、左下角设置30%的圆角大小。 （3）border-radius：10% 20% 30% 40%，给元素的左上角设置10%的圆角大小，给元素的右下角设置20%的圆角大小，
css椭圆，椭圆边框
weixin_52450702的博客
04-12 9028
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个圆与边框的交集形成圆角效果。 css设置椭圆的方法： 1、给元素添加“ {width:宽度值;height:高度值;}”样式，将元素设置为矩形； 2、给矩形元素添加“ {border-radius:100%;}”圆角样式将其设置为椭圆即可。这种情况如果设置的高和宽是相等的，则图像为圆。 border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性 每
CSS3技巧之形状（椭圆）
csdnxy的博客
12-22 1951
CSS3技巧之形状（椭圆）
css实现椭圆绕圈动画
苏苏就是小苏苏的博客
09-07 3014
css实现椭圆绕圈动画，rotate3D
CSS笔记——background背景样式、圆角样式和渐变色样式
bqiuer的博客
09-25 2181
在使用CSS雪碧图时，网页中的多个小图标或图像被组合成一个大的图像文件，并使用CSS的background-position属性将需要的部分显示出来。表示径向渐变的大小，可以是closest-side、closest-corner、farthest-side或farthest-corner；可以使用图片的URL来设置。可以作为JPEG和PNG的替代格式，可以用于加载网站中的图像，减少页面加载时间和网络带宽的使用。可以设置为repeat（默认）、repeat-x、repeat-y和no-repeat。
不要图片？CSS实现圆角边框渐变色+背景透明
苏苏就是小苏苏的博客
06-04 7105
👏不要图片？CSS实现圆角边框渐变色+背景透明，最近在工作中常常实现这些效果，速速来Get吧~🥇文末分享源代码。苏苏的bug。
css3中背景尺寸background-size详解
09-25
background-size是css3提供的一个新特性，它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方
学习CSS的背景图像属性background
12-11
CSS的背景属性“background”提供了众多属性值，如颜色、图像、定位等，为网页背景图像的定义提供了极大的便利。看看background提供的属性值： background : background-color | background-image | background-...
如何用css实现圆角_CSS实现圆角解决方案
weixin_30512785的博客
03-11 614
如何用css实现圆角_CSS实现圆角解决方案 导言： 本文探讨的是圆角框的终极解决方案，其核心关键词是“圆滑、完美、兼容、重用性、语义”，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。 圆角框，因为其样式比直角框漂亮，所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计，成为一道亮丽的风景线。 然而，就是这个圆...
css圆角三角形3个圆角_CSS中的圆角
cumudi0723的博客
07-28 1007
css圆角三角形3个圆角 CSS | 圆角 (CSS | Rounded Corners) border-radius property is commonly used to convert box elements into circles. We can convert box elements into the circle element by setting the border-ra...
CSS3 三 圆角
W_H_M_2018的博客
09-29 699
CSS3圆角 CSS3 圆角制作器 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。 属性 border-radius 9.0 5.0 4.0 -webkit- 4.0 3.0 -moz- 5.0 3.1 -webkit- 10.5 CSS3 border-radius 属性 使用 CSS3 ...
css设置圆角
weixin_69761220的博客
05-18 8583
用border-radius属性来设置圆角 可以写： 四个值：左上 右上 右下 左下 三个值：左上 右上左下 右下 两个值：左上右下 右上左下 一个值：共用 给单独一角设置圆角：border-xxx-xxx-radius 例如：左上角 border-top-left-radius div{ width: 100px; height: 100px; background-color: red...
网页前端知识汇总（一）——CSS如何为网页图片设置圆角效果
XYCMS博客家园
11-21 2529
是不是有的没有玩过程序的小伙伴浏览网页时会发现有的图片是圆角的，自己保存到本地却是直角的？其实图片性质没有改变，改变的只是网页显示，用遮罩层（CSS处理）后的显示效果，那这些图片的圆角效果是怎么设置的呢？就这样，图片变成一个圆形图片了，具体角度参数可以根据自己喜好左右调整。CSS能改变的只是显示效果，并不能改变图片的本质属性。这样网页图片的大小就和父级DIV一样大小了。你可以用CSS约束他大小，如。
CSS：实现动态旋转效果/椭圆渐变圆环旋转/椭圆轨迹旋转
smm的博客
05-07 4356
CSS：实现动态旋转效果
css 上下边框设置图片
03-21
可以使用CSS的border-image属性来设置上下边框的图片，具体的代码如下： border-image: url(border.png) 30 30 round; 其中，url()中的图片路径可以根据实际情况进行修改，30 30表示图片的边框宽度，round表示图片的边框样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zanebla

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值