HTML5中CSS的重点属性介绍

RGBA透明度: RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道,可用于设置透明值

  • 1, 块阴影与圆角阴影
    box-shadow text-shadow

  • 2, 圆角
    border-radius

  • 3, 边框图片
    border-image

  • 4, 形变
    transform:none|<transform-function>[<transform-fuction>]

<!--CSS属性介绍-->

<html>

<head lang="en">

<meta charset="UTF-8">

<title>CSS属性介绍</title>

<style>

div{

/*设置文字大小:px是像素*/

font-size: 30px;

width: 200px;

color: red;

background-color: cadetblue;

/*设置外边距:这里表示上右下左都是20px*/

margin: 20px;

/*也可以直接设置它们的不透明度*/

/*opacity: 0.2;*/

/*设置阴影:水平和垂直阴影的位置是必填的,后面的可选*/

box-shadow:10px 10px 10px red;

}

/*设置透明度的渐变效果*/

/*.Alex1{*/

/*background-color: rgba(168,0 ,0 ,1.0);*/

/*}*/

/*.Alex2{*/

/*background-color: rgba(168,0 ,0 ,0.7);*/

/*}*/

/*.Alex3{*/

/*background-color: rgba(168,0 ,0 ,0.4);*/

/*}*/

/*.alex4{*/

/*background-color: rgba(168,0 ,0 ,0.2);*/

/*}*/

/*.alex5{*/

/*background-color: rgba(168,0 ,0 ,0.1);*/

/*}*/

p{

color: cornflowerblue;

text-shadow: 10px 8px 5px cornflowerblue;

}

.William{

color: red;

width: 250px;

font-size: 20px;

height: 300px;

background-color: green;

/*设置圆角*/

/*border-radius: 50px;*/

border-bottom-left-radius: 50px;

border-top-right-radius: 50px;

}

</style>

</head>

<body>

<div class="Alex1">WilliamAlex</div>

<div class="Alex2">WilliamAlex</div>

<div class="Alex3">WilliamAlex</div>

<div class="Alex4">WilliamAlex</div>

<div class="Alex5">WilliamAlex</div><br>

<p></p>

<p>一个合格的程序员需要不停的追求新知识</p><br><br>

<div class="William">一个合格的iOS开发工程师是需要学习很多语言的</div>

</body>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,700评论 0 8
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,207评论 0 11
  • 写在从深圳返家的途中。呆在一个地方已经至少两个钟了,看来十一要在路上与众位萍水相逢的同乘们一起度过了。 好了,话不...
    沐酒鸿江阅读 345评论 0 0
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,295评论 0 1
  • 不小心删了第一天的文章,还好图还在。
    素心cathy阅读 255评论 0 0