css3圆角阴影矩形_CSS3与Photoshop：圆角和阴影

最新推荐文章于 2024-09-03 08:51:36 发布
最新推荐文章于 2024-09-03 08:51:36 发布
阅读量710 收藏
点赞数
文章标签： css html python java css3

css3圆角阴影矩形

本教程将演示如何使用几种组合CSS3样式创建漂亮的，简单的导航栏。 我们的外观是，过去只能通过组合多个图像，JavaScript和多个div来创建。 让我们开始吧…

注意：以下所有示例均已在Mozilla Firefox，Safari和Chrome上进行了测试。 如果您想在IE或任何其他浏览器中获得类似的信息，请留下评论，我们将很乐意为您提供帮助。

开始之前

从网页设计的一开始，美观且设计良好的导航栏便是保持网站井井有条和结构合理的更强大的元素之一。 过去，使用阴影，渐变，圆角和悬停效果创建漂亮的设计需要一系列技巧，这些技巧增加了代码的大小和图像数量。

在本教程中，我们将深入探讨两个非常重要CSS3效果： 圆角和盒子阴影，再加上我们将使用先前在CSS3 vs Photoshop-Complex Backgrounds教程中显示的线性渐变。

步骤1：圆角

每个人都听说过它们，谈论如何创建它们将是多余的，因此在以下示例中，我将重点介绍使用图像创建圆角效果的区别以及使用CSS3的优点和缺点。

在任何图形软件中，创建圆角效果都非常简单，但是在Photoshop中，我们存在一些问题：

准确性：即使可以设置圆角半径，Photoshop的内置抗锯齿引擎也经常在图形中添加一个或两个额外的像素。 过去，我们大多数人都必须手动减少基于不精确图像的圆角的像素，以创建具有干净颜色背景（例如彩色背景）的连接。

编辑：这是创建基于图像的圆角的最大问题之一。 如果您在Photoshop中为半径为10像素的角创建图形，并且由于某些原因需要将半径增大至20像素，则除了重绘形状或手动编辑其所有角，浪费时间和准确性之外，没有其他方法可以这样做。 调整大小是另一个巨大的问题，如果要拉伸或放大形状，则必须使用Photoshop中的“点选择工具”，因为使用“变换控件”可能会导致拐角形状出现不希望的变形。 我什至不必提一下，切角要花很多宝贵的时间。

填充和边界：在基于图像的圆角框内创建渐变填充一直是一项艰巨的任务，即使没有覆盖边界，也需要外科手术的精确度才能对涉及的图像进行切片。 您需要为每个框至少创建3个图像，一个用于顶角，另一个用于底角以及水平或垂直渐变，然后为其编写代码。 图像填充的另一个问题是，容器经常不得不增加其高度或宽度，从而在渐变上获得不良效果（请参见下面的屏幕截图）。

混合角样式：在Photoshop中，创建混合角样式需要花费一些时间，没有组合角样式的选项。 您必须手动减小/增加半径或组合形状...，然后切成每个角。

现在在CSS3中

使用CSS3替换基于图像的经典圆角是一个好主意。 这里有几个优点：

  • 它减少了到服务器的图像和HTTP请求的数量
  • 它适用于所有现代浏览器（IE 6,7,8除外），包括大多数流行的移动浏览器。
  • 您只需要在CSS文件中添加几行内容即可使其正常工作
  • 增大/减小半径，调整大小，更改填充和边框仅需几秒钟，而在Photoshop中则需要几分钟

让我们看一下在HTML元素上创建圆角的代码： 

/*Rounded Corner Boxes*/
.box{
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}

.fourcorners{
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	border-radius: 20px;
}

.topleft{
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	-khtml-border-radius-topleft: 20px;	
	border-top-left-radius: 20px;
}

.bottomleft{
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-khtml-border-radius-bottomleft: 20px;	
	border-bottom-left-radius: 20px;
}

.topright{
	-moz-border-radius-topright: 20px;
	-webkit-border-top-right-radius: 20px;
	-khtml-border-radius-topright: 20px;	
	border-top-right-radius: 20px;
}

.bottomright{
	-moz-border-radius-bottomright: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-khtml-border-radius-bottomright: 20px;	
	border-bottom-right-radius: 20px;
}

.asymmetrical1{	
	-webkit-border-top-left-radius: 160px;
	-khtml-border-radius-topleft: 160px;	
	-moz-border-radius-topleft: 160px;
	border-top-left-radius: 160px;
	
	-webkit-border-top-right-radius: 20px;
	-khtml-border-radius-topright: 20px;
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;

	-webkit-border-bottom-left-radius: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	
	-webkit-border-bottom-right-radius: 0px;
	-khtml-border-radius-bottomright: 0px;
	-moz-border-radius-bottomright: 0px;
	border-bottom-right-radius: 0px;
}

.asymmetrical2{
	-webkit-border-top-left-radius: 0px;
	-khtml-border-radius-topleft: 0px;	
	-moz-border-radius-topleft: 0px;
	border-top-left-radius: 0px;
	
	-webkit-border-top-right-radius: 90px;
	-khtml-border-radius-topright: 90px;
	-moz-border-radius-topright: 90px;
	border-top-right-radius: 90px;

	-webkit-border-bottom-left-radius: 0px;
	-khtml-border-radius-bottomleft: 0px;
	-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px;
	
	-webkit-border-bottom-right-radius: 90px;
	-khtml-border-radius-bottomright: 90px;
	-moz-border-radius-bottomright: 90px;
	border-bottom-right-radius: 90px;
}

.circle{
	width:170px;
	height:170px;
	
	padding:15px; 
	font-family:Arial, Helvetica, sans-serif; 
	color:#FFF; 
	font-size:12px; 
	font-weight:bold;
	float:left;
	
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
	
		
	-webkit-border-top-left-radius: 100px;
	-khtml-border-radius-topleft: 100px;	
	-moz-border-radius-topleft: 100px;
	border-top-left-radius: 100px;
	
	-webkit-border-top-right-radius: 100px;
	-khtml-border-radius-topright: 100px;
	-moz-border-radius-topright: 100px;
	border-top-right-radius: 100px;

	-webkit-border-bottom-left-radius: 100px;
	-khtml-border-radius-bottomleft: 100px;
	-moz-border-radius-bottomleft: 100px;
	border-bottom-left-radius: 100px;
	
	-webkit-border-bottom-right-radius: 100px;
	-khtml-border-radius-bottomright: 100px;
	-moz-border-radius-bottomright: 100px;
	border-bottom-right-radius: 100px;	
}

观看演示

步骤2：方块阴影

使用Photoshop可以实现的一些最酷的效果是通过“阴影”和“内部阴影”。 以正确的方式使用它们可以产生出色的3D效果。 当然，以错误的方式使用阴影或内部阴影会很快变成俗气的效果。

以下是一些良好做法的示例：

现在在CSS3中

CSS3允许我们仅用几行代码即可创建阴影，所使用的样式为“盒子阴影”。

要创建类似Photoshop的投影 ，可以使用以下语法：

box-shadow: <xpos> <ypos> <size> <color>;

若要创建类似Photoshop的内部阴影 ，可以使用以下语法：

box-shadow: inset <style> <xpos> <ypos> <size> <color>;

现在，这里是创建Box Shadows的多个变体的代码： 

/*Box shadows*/
.dropshadow{
	background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA));
	
	border:2px solid #F2F2F2;
	
	box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
	-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
	-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
}

.innershadow{
	background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC));
	
	border:2px solid #FEFEFE;
	
	box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
}

.intenseshadow{
	background-color:#FFF;
	border:1px solid #F00;
	
	box-shadow: 10px 10px 0px #F00;
	-moz-box-shadow: 10px 10px 0px #F00;
	-webkit-box-shadow: 10px 10px 0px #F00;
}

.bevel{
	background-color:#CCC;
	
	box-shadow: 10px 10px 0px #F00;
	-moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60);
	-webkit-box-shadow: 10px 10px 0px #F00;
}

观看演示

第3步：导航菜单

我们将结合圆角，渐变填充和框阴影来创建导航菜单。 您始终可以从Photoshop开始创建图形。 如果您想直接进入，请从页面顶部获取源代码下载。

有趣的部分是尝试使用CSS3获得相同的结果-我们开始吧！

首先是HTML模型（是的，我使用的是HTML5的“ nav”标签，因为它很酷，并且在语义上也很合适-但您可以改用div） 

<nav class="horizontal">
  <ul>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Dolor Sit Amet</a></li>
    <li><a href="#">Sed do Eiusmod</a></li>
    <li><a href="#">Consectetur Adipisicing</a></li>
    <li><a href="#">Lipsum amet</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
  </ul>
</nav>

步骤4： CSS

现在，让我们跳到CSS。 首先设置位置和高度。 

/*Sample Navigation Bar*/
nav.horizontal{
}

nav.horizontal h3{
	padding-bottom:20px;
}

nav.horizontal ul{
	height:50px;
}

nav.horizontal ul li{
	list-style:none;
	display:inline;
	float:left;
}

nav.horizontal ul li a{
	display:block;
	height:28px;
	margin:2px 6px 2px 6px;
	padding:15px 20px 0px 20px;
}

nav.horizontal ul li a:hover{
}

然后添加渐变填充： 

nav.horizontal{
  }
  
  nav.horizontal h3{
  padding-bottom:20px;
  }
  
  nav.horizontal ul{
  height:50px;
  
  background-image:-moz-linear-gradient(top, #93C204, #608009);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
  
  border:1px solid #608009;
  }
  
  nav.horizontal ul li{
  list-style:none;
  display:inline;
  float:left;
  }
  
  nav.horizontal ul li a{
  display:block;
  height:28px;
  margin:2px 6px 2px 6px;
  padding:15px 20px 0px 20px;
  
  font-size:12px;
  font-weight:bold;
  color:#FFF;
  text-transform:uppercase;
  text-decoration:none;
  
  border:1px solid transparent;
  background-image:none;
  }
  
  nav.horizontal ul li a:hover{
  background-image:-moz-linear-gradient(top, #161616, #2B3615);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
  
  border:1px solid #A3D804;
  }

接下来，圆角： 

nav.horizontal{
  }
  
  nav.horizontal h3{
  padding-bottom:20px;
  }
  
  nav.horizontal ul{
  height:50px;
  
  background-image:-moz-linear-gradient(top, #93C204, #608009);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
  
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;	
  border-radius: 8px;
  
  border:1px solid #608009;
  }
  
  nav.horizontal ul li{
  list-style:none;
  display:inline;
  float:left;
  }
  
  nav.horizontal ul li a{
  display:block;
  height:28px;
  margin:2px 6px 2px 6px;
  padding:15px 20px 0px 20px;
  
  font-size:12px;
  font-weight:bold;
  color:#FFF;
  text-transform:uppercase;
  text-decoration:none;
  
  border:1px solid transparent;
  background-image:none;
  
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;	
  border-radius: 10px;
  }
  
  nav.horizontal ul li a:hover{
  background-image:-moz-linear-gradient(top, #161616, #2B3615);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
  
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;	
  border-radius: 10px;
  
  border:1px solid #A3D804;
  }

最后是Box Shadows： 

nav.horizontal{
}

nav.horizontal h3{
	padding-bottom:20px;
}

nav.horizontal ul{
	height:50px;
	
	background-image:-moz-linear-gradient(top, #93C204, #608009);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;	
	border-radius: 8px;
	
	border:1px solid #608009;
	
	box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}

nav.horizontal ul li{
	list-style:none;
	display:inline;
	float:left;
}

nav.horizontal ul li a{
	display:block;
	height:28px;
	margin:2px 6px 2px 6px;
	padding:15px 20px 0px 20px;
	
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
	
	border:1px solid transparent;
	background-image:none;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;	
	border-radius: 10px;
}

nav.horizontal ul li a:hover{
	background-image:-moz-linear-gradient(top, #161616, #2B3615);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;	
	border-radius: 10px;
	
	border:1px solid #A3D804;
	
	box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
}

观看演示

步骤5：修复出血

关于带有填充和边框的圆角的最后一点：它们出血。 您会在我们的导航按钮的悬浮状态下注意到它：


填充超出边界的颜色渗色。

我们可以使用background-clip属性解决此问题，该属性确定给定元素的背景是否延伸到边框中。 默认情况下，它（ border-box ）会这样做，这给我们带来了混乱的局面，但是我们可以将其更改为padding-box ，从而使它不再border-box边界。

让我们在按钮中添加以下css： 

nav.horizontal ul li a{
	display:block;
	height:28px;
	margin:2px 6px 2px 6px;
	padding:15px 20px 0px 20px;
	
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
	
	border:1px solid transparent;
	background-image:none;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;	
	border-radius: 10px;
	
	-moz-background-clip: padding; 
	-webkit-background-clip: padding-box; 
	background-clip: padding-box; 
}

..悬停在上方时，会给我们带来更理想的结果：


很好地填充元素边界内包含的颜色。

观看演示

您可以在CSS3 info上阅读有关background-clip属性的更多信息 。

结论

使用CSS3创建美观，简单的导航栏比以往任何时候都更加轻松快捷，那么为什么不尝试下一个设计呢？ 谢谢阅读！

翻译自: https://webdesign.tutsplus.com/articles/css3-vs-photoshop-rounded-corners-and-box-shadows--webdesign-3701

css3圆角阴影矩形

daique1908
关注
HTML5、CSS3实现，圆角、阴影、边界图片
W的博客
07-21 1342
HTML5、CSS3实现，圆角、阴影、边界图片
纯CSS制作圆角矩形框知识总结
--时刻反思，多多思考
08-23 4012
在制作后台登录页的时候，需要从网页上面把那个圆角矩形框选取下来，然后通过Photoshop进行切割，在进行设置，最后得到需要的登录框的圆角矩形框。如下图。     但是登录最新的智囊团的那个登录页面的时候，上面的那个圆角矩形框已经没有了，最新的登陆页面跟QQ邮箱登录页面一样，没有了圆角矩形框。所以我就想到了用css自己堆出来一个圆角矩形框，通过查找资料，以及自己的一些使用方法的改进，最终
css3圆角阴影效果
09-10
最基本的css3效果,很好用，很强大，值得参考使用。
CSS3 创建圆角边框及矩形添加阴影
分享我的点点滴滴，在成长路上与你同行！
04-07 3075
一、nth-of-type(n) 第N个子元素 二、border-radius 圆角 三、box-shadow 阴影 index.html页面 /* 圆角 */ div{ width:200px; height:100px; background:#F93; border:2px solid gray; /*
css radius
最新发布
时间不说谎
09-03 738
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
Css3圆角阴影
wing 的专栏
02-19 575
圆角： -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; 阴影： -moz-box-shadow:0 1px 3px #cbcbcb; -webkit-box-shadow:0 1px 3px #cbcbcb;
模拟阴影效果纯CSS圆角矩形
管子（zero）的杂乱空间
11-26 1312
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
CSS3学习第3篇——圆角与阴影
李小白的博客
12-21 385
1、圆角border-radius 属性 描述 CSS border-radius 简写属性，设置所有四个 border-*-radius 属性。 3 border-bottom-left-radius 定义边框左下角的形状。 3 border-bottom-right-radius 定义边框右下角的形状。 3 border-top...
Html轻松实现圆角矩形
09-28
在文章中提到了使用Photoshop（PS）和切片工具来制作椭圆形形状的图片，然后将图片切片成四个部分，分别对应矩形的四个角。每个角的图片都是圆角的，通过将这些图片作为背景图片应用到对应的div上，最终实现视觉上的...
CSS3圆角、盒阴影与边框图片
尐轩web前端网络日志
11-14 2901
今天开始整理CSS3的知识 其实应该是昨晚写的，不过好像是急性肠胃炎了，痛的一晚上没睡着，蓝瘦香菇 还好今天打点滴睡一觉就好了，看来这吃东西还是注意点好，被我的胃肠报复了 CSS没什么难的，不过看的同时自己要在浏览器上试一试，试一遍就记住了 光看不做白看CSS3各个浏览器是存在兼容问题的 不同浏览器有不同前缀的私有属性，表示属性或规则还没有成为标准 换句话说，官方还没公布标准的时候，各个
Photoshop CSS网页制作的背景图 主题的引用样式
12-11
综上所述，通过Photoshop和CSS的结合，我们可以创建出具有专业外观的引用样式，提高网页的视觉吸引力。熟练掌握这些技巧，不仅可以提升设计效率，还能让网页的设计更具个性和专业性。在实际操作中，根据项目需求和...
css不规则矩形阴影模拟纸张折页角
weixin_46479342的博客
03-18 225
css ```html <div class="box"> <div class="box-bg"></div> <div class="box-content"> <div class="box-bg-trangle"></div> </div> </div> ```html .box{ width: 220px; he
Web前端入门（十八）圆角边框及盒子阴影
treesorshining的博客
10-26 2396
半径（圆的半径） 原理:(椭）圆与边框的交集形成圆角效果 参数值可以是数值或百分比的形式 如果是正方形盒子，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以（圆角矩形效果） 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角 2.盒子阴影 CSS3 中新增了盒子阴影，可以使用 box-shadow 属性为盒子添加阴影。 值 描述 h-shadow 必需。水平阴影的位置，允许负值。阴影正值往右移动
Web前端开发——CSS3之圆角边框与阴影
wq_ocean_的博客
02-06 1225
目录 1. 内容 2. CSS新特性 3. 浏览器 3.1 浏览器前缀 3.2 浏览器支持度 4.圆角边框border-radius 4.1 基本用法 4.2 案例1 4.2 案例2 4.3 案例3 5.阴影box-shadow 1. 内容 2. CSS新特性 CSS3应用比较多的新特性： 文本的阴影效果； 鼠标悬停动态效果。比如鼠标悬停在图片上可...
前端研习录（11）——CSS3新特性——圆角及阴影讲解及示例说明
清风不渡
07-31 386
重拾前端记忆，记录学习笔记，现在进入CSS3新特性——圆角及阴影部分，下面进行说明。四个值第一个值为左上角；三个值第一个值为左上角；第二个值为右上、左下角；两个值第一个值为左上、右下角；第二个值为右上、左下角。一个值四个角值相同。...
css 内阴影
string佳佳的博客
05-12 7623
效果图： 内阴影效果实现： box-shadow: inset 0px 0px 90px 1px rgba(255, 0, 0, 0.2);
内阴影css
qq_46100747的博客
12-15 250
测试5：--内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同
CSS 单边 inner box shadow
In the Cloud
07-14 1309
CSS3的box-shadow效果，想来大家可能并不陌生，但是一般我们用向外的shadow效果比较多，如果希望得到向内部的阴影效果，怎么实现呢？很容易，就是加上inset：.side-shadow { -webkit-box-shadow: inset 0 -3px 10px -3px #666666; -moz-box-shadow: inset 0 -3px 10px -3
css盒子阴影与圆角
cunjicsdn的专栏
07-12 368
圆角边框 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：border-top-left-radius、border-top-right-radi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值