CSS基本命令学习

Posted 2022-10-04 robin5

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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元素

上述代码的运行结果

技术图片

CSS3 边框

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3

用 CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象

CSS3 圆角

border-radius

div/*在div中添加圆角元素*/

    border:2px solid;
    border-radius:25px;

CSS3 border-radius - 指定每个圆角

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

<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

上述代码运行结果

技术图片

创建椭圆边角:

<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

上述代码运行结果：

技术图片

CSS3 盒阴影

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

上述代码的运行结果

技术图片

以上是关于CSS基本命令学习的主要内容，如果未能解决你的问题，请参考以下文章

码云配合git入门命令总结学习

基本命令学习 -目录及文件的基本操作

Mongodb学习笔记二(Mongodb基本命令)

Linux学习1——基本命令格式以及文件目录处理的基本命令

基本命令学习 -Linux压缩和解压缩命令汇总

redis基本命令学习