設置邊框底部/右上/左半徑

我正在使用「Inspect元素」在Chrome中編輯頁面，以在提交CSS樣式表之前進行樣式編輯。設置邊框底部/右上/左半徑

我在列表中編輯:before僞元素以顯示帶有綠色背景的標籤符號，並讓它看起來像是一秒鐘的樹葉，但是在保存更改時與預覽中輸入的內容完全相同，在加載頁面時不顯示。

截圖什麼的我救了：和我得到了什麼：
enter image description here

基本上border-top-left-radius和border-bottom-right-radius默認情況下是零，但設置

border-bottom-right-radius: 50px; 
border-top-left-radius: 50px;

讓我得到這種效果。起初我也許認爲瀏覽器已經改變了它的值border-top-right和border-bottom-left，但是將它們聲明爲零並沒有改變。我明白，你用檢查工具看到的東西並不總是實際計算出來的。

相關的CSS是

content: " ＃"; 
opacity: 1; 
border-bottom-right-radius: 50px; 
border-top-left-radius: 50px; 
text-shadow: #175F0A 1px 1px 0px; 
margin-right: 11px; 
color: #fff; 
background: #81B681; 
font-weight: bold; 
text-align: center; 
border-radius: 28px; 
padding-left: 6px; 
padding-right: 7px; 
padding-top: 4px; 
padding-bottom: 5px; 
line-height: 2; 
border-bottom-left-radius: 0px; 
border-top-right-radius: 0px;

更新這很奇怪 - 我made a jsfiddle和它保持我的風格......猜我矛盾的地方，現在正在尋找除非任何人都可以發現它？

http://jsfiddle.net/6Y4nY/3

最後，工作版本http://jsfiddle.net/6Y4nY/4

來源

2013-12-16 Louis Maddox

你可以給jsfiddle鏈接嗎？ –

Woahhh有什麼可能！謝謝喬希，奇怪... 也是1秒尼基塔 –

好吧，這似乎是我認爲的現貨，http://jsfiddle.net/WdtVu/1/。 –

要獲得形狀，你必須設置

.test { 
    width: 100px; 
    height: 100px; 
    top: 20px; 
    left: 20px; 
    background-color: green; 
    border-radius: 100% 0px; 
}

demo

由於人們似乎約百分比半徑混亂：border-radius：50％;給你一個圓圈。

任何高於該值的值必須與低於50％的「在另一側」配對才能生效。

如果我不設置第二個（第四）一角爲0px，我不能得到100％的第一和第三

來源

2013-12-16 18:50:07 vals

您是否必須將0添加到'border-radius'才能得到它？只有100％，你會得到一個圈子，http://jsfiddle.net/tVdTh/1/。我一直在想，爲什麼只有100％似乎什麼都不做。 –

@JoshPowell border-radius沒有做你認爲的事......這張圖解釋了爲什麼...... http://www.w3.org/TR/css3-background/corner.png。另外，Lea Verou做了一個很棒的演講。 http://lea.verou.me/humble-border-radius – brbcoding

非常感謝你的鏈接！我正在查看演示文稿。 –

當我運行通過小提琴的代碼，它出來像你想要什麼。 jsFiddle

.test { 
content: " ＃"; 
opacity: 1; 
border-bottom-right-radius: 50px; 
border-top-left-radius: 50px; 
text-shadow: #175F0A 1px 1px 0px; 
margin-right: 11px; 
color: #fff; 
background: #81B681; 
font-weight: bold; 
text-align: center; 
border-radius: 28px; 
padding-left: 6px; 
padding-right: 7px; 
padding-top: 4px; 
padding-bottom: 5px; 
line-height: 2; 
border-bottom-left-radius: 0px; 
border-top-right-radius: 0px; 
    display: inline; 
}

也許別的地方在你的代碼，您正在設置右上方和左下方的半徑爲0以外的東西嗎？

（我在底部添加了顯示以防止div佔據整行）

來源

2013-12-16 18:51:08

設置邊框底部/右上/左半徑

回答

相關問題