CSS基本命令學習

時間 2019-11-16

標籤 css 基本命令學習欄目 CSS 简体版

原文原文鏈接

第一個簡單的CSS命令

<html>    
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
div
{
    width:200px;/*定義區域的寬度*/
    height:100px;/*定義區域的高度*/
    background-color:red;/*定義背景顏色*/
    border:1px solid black;/*定義邊界的寬度*/
    border-radius: 10px;/*定義方框四角爲圓形*/
    box-shadow:10px 10px 10px #888888;/*定義陰影*/
}
div#div2/*定義新的函數*/
{
    transform:rotate(30deg);/*旋轉角度，順時針*/
        -1321213132-/*前面這句話中不能含有中文*/
    /*下面兩句話是對後面的語句進行註釋，不執行*/
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>這是一個簡單的DIV元素</div>
<div id="div2">這是一個上述圖形順時針旋轉30度的 DIV 元素</div>
</body>
</html>

DIV元素

上述代碼的運行結果css

CSS3 邊框

屬性	說明	CSS
border-image	設置全部邊框圖像的速記屬性。	3
border-radius	一個用於設置全部四個邊框- *-半徑屬性的速記屬性	3
box-shadow	附加一個或多個下拉框的陰影	3

用 CSS3，能夠建立圓角邊框，添加陰影框，並做爲邊界的形象html

CSS3 圓角css3

border-radius

div/*在div中添加圓角元素*/
{
    border:2px solid;
    border-radius:25px;
}

CSS3 border-radius - 指定每一個圓角web

屬性	描述
border-radius	全部四個邊角 border---radius 屬性的縮寫
border-top-left-radius	定義了左上角的弧度
border-top-right-radius	定義了右上角的弧度
border-bottom-right-radius	定義了右下角的弧度
border-bottom-left-radius	定義了左下角的弧度

若是你在 border-radius 屬性中只指定一個值，那麼將生成 4 個圓角。ide

可是，若是你要在四個角上一一指定，能夠使用如下規則：函數

四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。
三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角
兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角
一個值： 四個圓角值相同

<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
} 
</style>
</head>
<body>

<p>四個值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三個值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>兩個值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html>

border-radius

上述代碼運行結果url

建立橢圓邊角:spa

<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>
</head>
<body>

<p>橢圓邊框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p> 橢圓邊框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>橢圓邊框 - border-radius: 50%:</p>
<p id="rcorners9"></p>

</body>
</html>

border-radius

上述代碼運行結果：ssr

CSS3 盒陰影3d

box-shadow

div
{
    box-shadow: 10px 10px 5px #888888;
}

CSS3 邊界圖片

border-image

<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}
#round
{
    border-image:url(border.png) 30 30 round;
}
#stretch
{
    border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 屬性。</p>
<p> border-image 屬性用於設置圖片的邊框。</p>
<div id="round">這裏，圖像平鋪（重複）來填充該區域。</div>
<br>
<div id="stretch">這裏，圖像被拉伸以填充該區域。</div>
<p>這是咱們使用的圖片素材：</p>
<img src="/images/border.png" />
</body>
</html>