HTML/CSS創建三欄邊框陰影

-1

有人可以幫忙嗎？謝謝！

謝謝大家。這是我到目前爲止。我試圖把這些放在單獨的圓框邊框中。標題（足球，棒球，籃球）的不同背景顏色我想爲標題製作標籤。

<div class="jive-html-text-widget"> 
    <style type="text/css"> 
     .third {float:left; width:32%; margin-left:1%;} 
     .third:first-child {margin-left:0;} 
     .third h2 {font-family: "consolas"; color:#762432; margin-bottom:12px;} 
     .third p {font-family: "consolas"; color:#2B547E; margin-bottom:12px;} 
     .third ul {margin:0 0 22px 30px;} 
     .third ul li {margin-bottom:8px;} 
     .third li {font-family: "consolas"; color:#2B547E} 
    </style> 
    <div class="jive-html-text-widget"> 
     <div class="jive-html-text-widget"> 
     <hr/> 
     <div class="third"> 
      <h2>Baseball</h2> 
      <ul class="noindent"> 
       <li>a ball game played between two teams of nine on a field with a diamond-shaped circuit of four bases. It is played chiefly in the US, Canada, Latin America, and East Asia.</li> 
      </ul> 
     </div> 
     <div class="third"> 
      <h2>Soccer</h2> 
      <ul class="noindent"> 
       <li>a game played by two teams of eleven players with a round ball that may not be touched with the hands or arms during play except by the goalkeepers. The object of the game is to score goals by kicking or heading the ball into the opponents' goal.</li> 
      </ul> 
     </div> 
     <div class="third"> 
      <h2>Basketball</h2> 
      <ul class="noindent"> 
       <li>Originally invented in the movie BASEketball, starring South Park creators Trey Parker and Matt Stone, BASEketball has evolved from a fictional game to a popular real-life sport![1] It might have started as a joke, but BASEketball has rules just like the sports it started from.</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div>

來源

2016-06-10 Ninja

你有什麼迄今所做？ – Spiderman

我們可以，但是你到目前爲止編碼了什麼？ – dippas

我們需要一些代碼來幫助你。請花點時間訪問[幫助中心]（http://stackoverflow.com/help），並閱讀[如何提出一個很好的問題]（http://stackoverflow.com/help/how-to-問）。 –

嗨檢查這個https://plnkr.co/edit/kAEDONthQYYgB54Sc7Tz?p=preview做參考

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 

    <div class="column-left">Column left The border-left shorthand property sets all the left border properties in one declaration.The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color.</div> 
    <div class="column-center">Column centerThe border-left shorthand property sets all the left border properties in one declaration.The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color.</div> 
    <div class="column-right">Column right</div> 
</div> 
    </body> 

</html>

和CSS

.container { 
    width: 100% 
} 
.container div { 
    height: 300px; 
} 
.column-left { 
    left: 0; 
    width: 30%; 
    background: #00F; 
    float: left; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    border: 1px solid red; 
} 
.column-center { 
    width: 30%; 
    background: #933; 
    float: left; 
    margin-left: 20px; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    border: 1px solid red; 
} 
.column-right { 
    width: 30%; 
    right: 0; 
    background: #999; 
    float: left; 
    margin-left: 20px; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    border: 1px solid red; 
}

來源

2016-06-10 01:43:40

HTML/CSS創建三欄邊框陰影

回答

相關問題