有人告訴我它們不應該在那里,但我該如何移除它們?
https://jsfiddle.net/jqzs6d3o/
這就是我在代碼中所做的一切。
<b> </b>從 html 中洗掉標簽吧。
那怎么辦?
這是很難做到的事情嗎?
移除<b></b>會移除藍色圓圈。我想保留圓圈并洗掉<b></b>
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: transparent;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew::before,
.exitnew::after {
content: "";
position: absolute;
height: 5px;
width: 38px;
top: 22px;
left: 5px;
right: 5px;
background: red;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew::after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover::before,
.exitnew:hover::after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid blue;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
uj5u.com熱心網友回復:
添加了一些樣式#circle ID并稍微改變了您的定位.exitnew還b display: none;檢查了下面的更改。
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: transparent;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew::before,
.exitnew::after {
content: "";
position: absolute;
height: 5px;
width: 38px;
top: 17px;
left: -1px;
right: 5px;
background: red;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew::after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover::before,
.exitnew:hover::after {
background: green;
}
.exitnew b {
display: none;
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
border: 5px solid blue;
border-radius: 50%;
}
#circle {
background-color:#fff;
border-width: 2rem;
border:4px solid darkblue;
height:45px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width: 45px;
margin-left: 1rem;
position: absolute;
}
<button class="exitnew" id="circle" type="button" aria-label="Close"><b></b></button>
uj5u.com熱心網友回復:
您可以將按鈕本身用作圓圈。有了這個,您將擁有更清晰的代碼,您可以在其中完全洗掉 b 標簽而不會丟失圓圈。
.exitnew {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 38px;
height: 40px;
border: 5px solid blue;
border-radius: 50%;
}
這是我所做的更改。 https://jsfiddle.net/Lnbuxvc0/
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/358357.html
上一篇:單擊時漢堡選單覆寫不會顯示X
下一篇:<p>和文本節點有什么區別?
