顏色上白線綠地沒啥問題,發球弧和角球線通過父級的覆蓋可以做到部分弧線效果.
先看一下整體效果:
具體地:
1 )場地外圍我們使用混合色:
background: radial-gradient(sandybrown,maroon);--line: 0.3em
solid
white;
border: var(--line);
.container
.field
calc
(計算式子)
var(–變數名)呼叫:
body
方法一::before/after在隱藏邊角線的應用.
/*:before 選擇器在被選元素的內容前面插入內容。
請使用 content 屬性來指定要插入的內容。*/
.corner-arc
::after,
.corner-arc
::before
.corner-arc-bottom ,
.corner-arc-top
.right
/*中間注釋部分為相對定位實現的,但是不能做到響應式*/
body
.container
.container
span
.field
.halfway-line
.centre-circle,
.penalty-arc
.centre-circle
.centre-mark
.penalty-mark
.penalty-area
.penalty-arc
.goal-area
.corner-arc
.corner-arc
::after,
.corner-arc
::before
.corner-arc
::before
.corner-arc
::after
/* .corner-arc-top
.corner-arc-bottom */
.right
style>
class="container">
class="field">
class="left">
class="halfway-line">
span>
class="centre-circle">
span>
class="centre-mark">
span>
class="penalty-area">
span>
class="penalty-mark">
span>
class="penalty-arc">
span>
class="goal-area">
span>
class="corner-arc-top">
span>
class="corner-arc-bottom">
span>
div>
class="right">
class="halfway-line">
span>
class="centre-circle">
span>
class="centre-mark">
span>
class="penalty-area">
span>
class="penalty-mark">
span>
class="penalty-arc">
span>
class="goal-area">
span>
class="corner-arc-top">
span>
class="corner-arc-bottom">
span>
div>
div>
div>
body>border="0" width="330" height="86" src="">
純CSS視差滾動
參考旭哥的 demo點這裡 class box class curtain class comehere div div box curtain comehere 1.原理就是 利用perspective translatez，使得影象在視覺上縮放，然後通過scale將縮放至原來的大小，但是對於滾動...
純CSS繪製箭頭
這幾天研究別人的 發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理，發現其實也很簡單。繪製箭頭，首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0，有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...
純css畫表情
前端的夥伴們通常提到畫，會想到canvas。很多人致力於用css畫圖，今天用css畫個one兔的形象，其中包括不規則橢圓，圓角三角形，非常有趣哦 class wrap class leftear class lefte class leftea div div div class rightear ...