为CSS中的上半部分按钮创建圆角
我想使圆角只为上半部分的按钮 我知道如何使用为CSS中的上半部分按钮创建圆角,css,Css,我想使圆角只为上半部分的按钮 我知道如何使用边框半径和-webkit边框半径为所有边制作圆角 但我只喜欢上半场有角球 我需要一些关于如何在CSS中执行此操作的指导。您可以使用以下样式规则: border-top-left-radius border-top-right-radius 注意:border radius规则在没有-webkit-位的情况下工作。对于此,border radius css标记有特定的变体: border-top-left-radius:2em; border-top
边框半径
和-webkit边框半径
为所有边制作圆角
但我只喜欢上半场有角球
我需要一些关于如何在CSS中执行此操作的指导。您可以使用以下样式规则:
border-top-left-radius
border-top-right-radius
注意:
border radius
规则在没有-webkit-
位的情况下工作。对于此,border radius css标记有特定的变体:
border-top-left-radius:2em;
border-top-right-radius:2em;
以下是我喜欢使用的模式: CSS
.round-corners-5px{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.round-corners-10px{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.unround-top-corners{
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.unround-bottom-corners{
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
HTML
<button class="round-corners-5px unround-bottom-corners" style="background-color: white;"></button>
如果您只想使某些角圆角,则代码如下:
border-radius:5px 5px 5px 5px;
第一个值用于左上角,第二个值用于右上角,第三个值用于左下角,第四个值用于右下角 当我想绕过特定的拐角时,我使用下面的代码
border-radius: 10px 10px 0 0;
// top-left top-right bottom-right bottom-left.
如果您使用sass scss,那么您可以编写一次并将其作为一行简单的代码重用,如下所示: 在sass或scss文件中,按如下方式定义混合:
@mixin rounded($amount: "10px",$position: null) {
@if $position != null {
@if $position == "top" or $position == "bottom" {
//top or bottom
-webkit-border-#{$position}-left-radius: $amount;
-moz-border-#{$position}-left-radius: $amount;
border-#{$position}-left-radius: $amount;
-webkit-border-#{$position}-right-radius: $amount;
-moz-border-#{$position}-right-radius: $amount;
border-#{$position}-right-radius: $amount;
} @else {
// top-left or top-right or bottom-left or bottom-right
-webkit-border-#{$position}-radius: $amount;
-moz-border-#{$position}-radius: $amount;
border-#{$position}-radius: $amount;
}
} @else {
// ALL IF EMPTY
-webkit-border-radius: $amount;
-moz-border-radius: $amount;
border-radius: $amount;
}
}
然后在scss文件中,您可以像这样使用mixin:
@include rounded(); /*as default 10px on all corners*/
@include rounded(15px); /*all corners*/
@include rounded(15px, top); /*all top corners*/
@include rounded(15px, bottom); /* all bottom corners*/
@include rounded(15px, top-right); /*this corner only*/
@include rounded(15px, top-left); /*this corner only*/
@include rounded(15px, bottom-right); /*this corner only*/
@include rounded(15px, bottom-left); /*this corner only*/
此.scss代码将生成此.css代码:
/* as default 10px on all corners */
-webkit-border-radius: "10px";
-moz-border-radius: "10px";
border-radius: "10px";
/* all corners
*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* all top corners
*/
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-top-right-radius: 15px;
/* all bottom corners
*/
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
/* top-right corner only
*/
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-top-right-radius: 15px;
/* top-left corner only
*/
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-left-radius: 15px;
/* bottom-right corner only
*/
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
/* bottom-left corner only
*/
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-left-radius: 15px; }
有助于了解其工作原理,
我这样做是为了制作左方形和右圆角:
.btn-circle.btn-lg {
width: 170px;
height: 47px;
padding: 10px 16px;
font-size: 17px;
line-height: 1.33;
/*border-radius: 25px;*/ //use this for both side rounded corner side
border-radius: 0px 50px 50px 0px / 50px 50px 50px 50px;
}
指南帮助我在twitter引导程序中制作了圆形按钮感谢各位的快速回复。。今天学到了一些新东西。。。边界半径:3px3px0;只要记住首字母缩略词“TRBL”或助记符“圆形按钮很麻烦”表示顶部(左)右底部(右)左。基本上是顺时针移动。这是很多代码。可以减少到边界半径:2em 2em 0@JGallardo如果用户需要继承左/右下角的边界半径,我们可以执行
边界半径:2em 2em inherit
?这仍然相当长,可读性较差(对于那些永远记不起所有4个属性的顺序的人来说)。要在SASS中简化这一点,您可以将其写成@mixin rounded($amount:“10px 10px 10px 10px 10px”){-moz border radius:$amount;-webkit border radius:$amount;border radius:$amount;-khtml border radius:$amount;}
其中输入所有径向金额作为$amount(左上右上下右下)