css3 边框圆角以及切图

最新推荐文章于 2024-05-28 10:10:01 发布

敬礼 salute

最新推荐文章于 2024-05-28 10:10:01 发布

阅读量311

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_49868928/article/details/109185545

版权

本文探讨了CSS3中的边框圆角属性及其在网页设计中的应用，同时介绍了如何利用CSS3进行高效切图，提升网页视觉效果。

摘要由CSDN通过智能技术生成

css3 边框圆角切图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3 边框</title>
	<style>
		body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
   
			margin: 0;
			padding: 0;
		}

		body {
   
			background-color: #F7F7F7;
		}

		.wrapper {
   
			width: 1000px;
			margin: 0 auto;
			padding: 20px;
			box-sizing: border-box;
		}

		header {
   
			padding: 20px 0;
			margin-bottom: 20px;
			text-align: center;
		}
		header h3 {
   
			line-height: 1;
			font-weight: normal;
			font-size: 28px;
		}

		.main {
   
			/*overflow: hidden;*/
		}

		.main:after {
   
			content: '';
			clear: both;
			display: block;
		}

		.main .item {
   
			width: 210px;
			height: 210px;
			margin: 0 30px 30px 0;
			display: flex;
			position: relative;
			background-color: #FFF;
			float: left;
			box-shadow: 2px 2px 5px #CCC;
		}
		
		.main .item:after {
   
			content: attr(data-brief);
			display: block;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 210px;
			position: absolute;
			top: 0;
			left: 0;
			color: #FFF;
			font-family: '微软雅黑';
			font-size: 18px;
			background-color: rgba(170, 170, 170, 0);
			z-index: -1;
			transition: all 0.3s ease-in;
		}

		.main .item:hover:after {
   
			background-color: rgba(170, 170, 170, 0.6);
			z-index: 100;
		}

		.main .item:nth-child(4n) {
   
			margin-right: 0;
		}

		/*.main .item:nth-last-child(-n+5) {
			margin-bottom: 0;
		}*/

		/* 以上是骨架样式 */
		/* 1、2、3、4 顺时针 */
		.border-radius {
   
			width: 180px;
			height: 180px;
			margin: auto;
			border: 1px solid red;
			/*border-radius: 50% 30% 20%;*/
		}
		
		.square {
   
			border-radius: 0;
		}
		
		/*拱形*/
		.item:nth-child(1) .border-radius {
   
			border-radius: 90px;
		}

		/*拱形*/
		.item:nth-child(2) .border-radius {
   
			border-radius: 90px 90px 0 0;
		}

		/*半圆*/
		.item:nth-child(3) .border-radius {
   
			height: 90px;
			border-radius: 90px 90px 0 0;
		}

		/*左上角*/
		.item:nth-child(4) .border-radius {
   
			/*height: 90px;*/
			border-radius: 90px 0 0 0;
		}

		/*四分之一圆*/
		.item:nth-child(5) .border-radius {
   
			width: 90px;
			height: 90px;
			border-radius: 90px 0 0 0;
		}

		/*横着的椭圆*/
		.item:nth-child(6) .border-radius {
   
			height