css3学习心得

最新推荐文章于 2022-07-01 23:52:03 发布

KSH_Wu

最新推荐文章于 2022-07-01 23:52:03 发布

阅读量749

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/KSH_Wu/article/details/53047040

web 专栏收录该内容

8 篇文章

订阅专栏

本文分享了关于CSS3的学习心得，重点介绍了两个关键特性：块级元素的旋转和边框圆角设置。通过示例代码，强调了动手实践的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道CSS 用于控制网页的样式和布局，而CSS3 是最新的 CSS 标准。下面回顾一下css3中的新特性。（都是基于w3school网站学习的心得，更纤细的请查阅该网站。点击打开链接）

（1）首先学习的第一个特性就是对块级元素进行操作：旋转

看下列代码（一定要自己敲一遍，便于记忆）

<!DOCTYPE html>     <span style="color:#FF0000;"><!--这个声明很重要，涉及到浏览器的兼容问题-></span>
<html>
<head>
<style type="text/css">
div       <span style="color:#FF0000;"> <!--首先定义一个默认的块级元素，然后对其进行操作。-></span>
{
border:1px solid black;
padding:5px;
margin:0px;
weight:50%
height:80px;
background-color:red;
}
div.div1
{
transform:rotate(30deg)   <span style="color:#FF0000;"><!--在子元素中加入transform的旋转属性-></span>
}
</style>
</head>
<body>
<div>块级元素1</div>
<div class=div1>块级元素2</div>
</body>
</html>

总体上来讲，都是按照css的规则去编写语句，只不过css3加入了一些让网页变得更加丰富的属性罢了。

（2）接下来的属性是对边框进行操作的属性：border-radius

下面是一个实例：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
border:1px solid black;
padding:10px;
background-color:red;
width:50%;
height:80px;
text-align:center;
color:yellow;
font-family:times;
<span style="color:#FF0000;">border-radius:25px;</span>           <!--有很多对字体和表格操作的属性，可以自己添加进去以免忘记->
} 
</style>
</head>
<body>
<div>添加圆角</div>
</body>
</body>
</html></span>

（3）第三个属性是为元素添加阴影：box-shadow

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
div
{
width:50%;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px <span style="color:#FF0000;">#888888</span>;    <span style="color:#FF0000;"> <!--定义阴影背景颜色-></span>
}
</style>
</head>
<body>

<div>添加阴影</div>

</body>
</html></span>