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>

border-image

上述代码的运行结果