css圆角三角形3个圆角_CSS圆角

css圆角三角形3个圆角

The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of the major browsers:  Safari, Chrome, Internet Explorer, Opera, and Firefox.  Let's look at border-radius syntax, caveats, and Internet Explorer support.

使用CSS创建圆角的功能可以在无需包含图像的情况下进行细微的设计改进。 这样，CSS圆角就节省了我们创建图像和对服务器的请求的时间。 如今，所有主要浏览器均支持CSS圆角处理：Safari，Chrome，Internet Explorer，Opera和Firefox。 让我们看一下border-radius语法，注意事项和Internet Explorer支持。

View Demo 查看演示 View Curvy Corners Demo 查看弯曲的角落演示

语法和标准 (Syntax and Standards)

The CSS3 standard property for applying rounded corners is border-radius.  This property is added to elements just as naturally as width or positional properties are:

应用圆角CSS3标准属性是border-radius 。 就像width或位置属性一样，此属性也自然添加到元素：

.roundElement	{
	border-radius: 10px;
}

The preceding statement assigns one rounded corner value to each of the element's four corners.  A specific border radius may also be added to each to elements individually:

前面的语句将一个圆角值分配给元素的四个角中的每个角。 特定的边界半径也可以分别添加到每个元素：

.pearElement	{
	border-top-left-radius: 7px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 8px;
}

A shorthand border-radius syntax is also available where application:

在以下应用程序中也可以使用速记型border-radius语法：

.oddRoundElement {
	border-radius: 12px 5px 12px 5px;
	/* or */
	border-radius: 12px 5px;
}
	

The pattern details top-left, top-right, bottom-right, bottom-left.

该模式详细说明了左上，右上，右下，左下。

浏览器支持和前缀 (Browser Support and Prefixes)

Since rounded corner elements and border-radius were not a set standard, each browser implemented their own prefixed {prefix}-border-radius implementation.  Those prefixes look like:

由于圆角元素和border-radius不是固定的标准，因此每个浏览器都实现了自己的前缀{prefix}-border-radius实现。 这些前缀看起来像：

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;

/* firefox's individual border radius properties */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */

/* webkit's individual border radius properties */
-webkit-border-top-left-radius:15px; /* top left corner */
-webkit-border-top-right-radius:50px; /* top right corner */
-webkit-border-bottom-left-radius:15px; /* bottom left corner */
-webkit-border-bottom-right-radius:50px; /* bottom right corner */

Essentially you would need to make a separate declaration for each browser.  Adding the same rule for different browsers is annoying so adoption of the standard border-radius is important.

本质上，您需要为每个浏览器分别声明。 为不同的浏览器添加相同的规则很烦人，因此采用标准border-radius非常重要。

Internet Explorer支持 (Internet Explorer Support)

Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:

Internet Explorer直到IE9才支持border-radius ，这使开发人员和设计人员感到沮丧。 使用IE9，重要的步骤是使用边缘META标签并提供边界半径：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

While many solutions have been presented, I've found the best to be a small JavaScript-powered solution called CurvyCorners.  CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, event supporting anti-aliasing.

尽管已经介绍了许多解决方案，但我发现最好的方法是使用JavaScript驱动的小型解决方案CurvyCorners 。 CurvyCorners使用一系列JavaScript生成的DIV绘制圆角，从而支持抗锯齿功能。

Using CurvyCorners is quite simple.  The first step is adding the CurvyCorners.js file to the page:

使用CurvyCorners非常简单。 第一步是将CurvyCorners.js文件添加到页面：

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>

CurvyCorners detects the presence of border-radius on DOM elements and works its magic to duplicate the effect in IE. There are no images involved. You may also identify specific elements to apply rounded corners to:

CurvyCorners检测DOM元素上border-radius的存在，并运用其魔力复制IE中的效果。 没有图像。 您还可以标识特定元素以将圆角应用于：

var settings = {
	tl: { radius: 12 },
	tr: { radius: 12 },
	bl: { radius: 12 },
	br: { radius: 12 },
	antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
  curvyCorners(settings,rd);
});

I highly recommend specifying elements to add rounded corners to, as checking the entire page is a taxing process;  remember that the rounding occurs on every single page load.

我强烈建议指定要添加圆角的元素，因为检查整个页面是一个繁重的过程。 请记住，四舍五入发生在每一个页面加载上。

View Demo 查看演示 View Curvy Corners Demo 查看曲线角落演示

Rounded corners may be achieved with CSS' border-radius property in Internet Explorer, Firefox, Safari, Chrome, and Opera.  This small feature opens a new realm of possibilities in bridging design and code.  Now that browser support is abundant and browsers are beginning to use a standard border-radius property name, there are really no drawbacks to relying on CSS for your rounded corners.

通过在Internet Explorer，Firefox，Safari，Chrome和Opera中使用CSS的border-radius属性可以实现圆角。 这个小功能为桥接设计和代码开辟了新的可能性。 既然浏览器支持丰富，并且浏览器开始使用标准的border-radius属性名称，那么依靠CSS来处理圆角确实没有缺点。

翻译自: https://davidwalsh.name/css-rounded-corners

css圆角三角形3个圆角