我添加了这个样式的元素:
.checkout-step.current .number {
background-color: #d26d51;
outline: 1px solid #d26d51;
outline-offset: 4px;
}
但我不想要轮廓中的方角,我想绕过角落,就像这个例子:
我该怎么做?
答案 0 :(得分:2)
我的方法如下。请检查JSFiddle。 我添加了以下HTML。
<a href="#">2</a>
我添加了以下css。
a {
background: #999;
width: 40px;
height: 40px;
border-radius: 20px;
text-decoration: none;
color: #fff;
display: inline-block;
line-height: 40px;
position: relative;
border: 2px solid #000;
text-align: center;
}
a:after {
content: '';
display: block;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 30px;
border: 2px solid #f00;
}
答案 1 :(得分:0)
使用border-radius属性执行此操作。 http://www.w3schools.com/cssref/css3_pr_border-radius.asp
答案 2 :(得分:-1)
**使用此代码**
大纲我们不能使用radius属性而不是轮廓make作为边框和半径所以我改变了这样的代码试试这个。
HTML
<div class="usecode"><div class=".checkout-step.current .number">2</div></div>
CSS
.checkout-step.current .number {
background-color: #d26d51;
margin:15px;
}
.usecode
{
border:1px solid #d26d51;
border-radius:25px !important;
}