CSS3边框和圆角学习打卡

最新推荐文章于 2022-08-05 14:43:09 发布

gegejiawei

最新推荐文章于 2022-08-05 14:43:09 发布

阅读量176

点赞数

分类专栏： Web前端开发工程文章标签： css3

本文链接：https://blog.csdn.net/gegejiawei/article/details/105996925

版权

Web前端开发工程专栏收录该内容

27 篇文章 0 订阅

订阅专栏

课程介绍

1、CSS3圆角
2、CSS3盒阴影
3、CSS3边界图片

CSS3圆角

1、border-radius:一个最多可以指定四个border-*-radius属性的复合属性，为元素添加圆角边框
2、语法：border-radius:1-4 length|%/1-4 length|%
3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3指定每一个圆角

1、多个值：四个值：第一个 - 左上角第二个 - 右上角第三个 - 右下角第四个 - 左下角
2、三个值：第一个 - 左上角第二个 - 右上角和左下角第三个 - 右下角
3、两个值：第一个值 - 左上和右下第二个值 - 右上和左下
4、一个值：四个圆角相同

属性：

Border-top-left-radius 左上角
Border-top-right-radius 右上角
Border-bottom-right-radius 右下角
Border-bottm-left-radius 左下角

CSS3圆角案例

案例目标

在这里插入图片描述

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style type="text/css">
		div{
			position: relative;
			width: 500px;
			height: 300px;
			border: 1px solid black;
			border-radius: 50%;
			font-size: 24px;
			font-weight: bold;
			text-align: center;
			line-height: 300px;
		}

		div::before,
		div::after{
			position: absolute;
			content: "";
			display: block;
			border: 1px solid black;
			border-radius: 50%;
		}

		div::before{
			width: 50px;
			height: 50px;
			bottom: -25px;
			right: 25px;
		}

		div::after{
			width: 20px;
			height: 20px;
			bottom: -50px;
			right: 0px;
		}
	</style>
</head>
<body>
	<div>大家好，欢迎来到渡课网！</div>
</body>
</html>

知识点：为了满足各个浏览器的兼容性，加上技术前缀。

chrome: -webkit-
firefox: -moz-
ie: -ms-
opera: -o-

案例总结：

1、一个项目的实现可以有多种方式；
2、对于圆角到底是圆形还是椭圆形的情况，根据你设置的宽和高决定
3、Border-radius:20px/30px; 水平半径/垂直半径

CSS3盒阴影

1、box-shadow属性：可以把设置一个或者多个下拉阴影的框
2、语法：box-shadow:h-shadow v–shadow blur spread color inset;
3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3边界图片

1、border-image属性：来构建美丽的可扩展按钮
2、语法：border-image:source slice width outset repeat;
3、兼容：IE不兼容 firefox chrome safari6+ opera不兼容

border-image-source属性

1、指定要使用的图像，而不是border-style属性设置的边框样式
2、语法：border-iamge-source:none|image;

border-image-slice属性

1、指定图像的边界向内偏移
2、语法： border-iamge-slice:number | % |fill;

border-image-width属性

1、指定图像边界的宽度
2、语法： border-iamge-width:number | % |auto;

border-image-outset属性

1、指定在边框的外部绘制border-image-area的量 – 边框区域
2、语法：border-iamge-outset:number|length;

border-image-repeat属性

1、图像边界是否会重复
2、语法：border-iamge-repeat: stretch | repeat | round | initial | inherit;

思维导图

在这里插入图片描述

gegejiawei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3边框和圆角学习打卡

课程介绍1、CSS3圆角2、CSS3盒阴影3、CSS3边界图片CSS3圆角1、border-radius:一个最多可以指定四个border-*-radius属性的复合属性，为元素添加圆角边框2、语法：border-radius:1-4 length|%/1-4 length|%3、兼容：IE9+ firefox4+ chrome safari5+ operaCSS3指定每一...
复制链接

扫一扫