HTML5+CSS3+JS学习笔记-6

来源：互联网发布：淘宝手机店铺收藏地址编辑：程序博客网时间：2024/04/29 09:26

今天学习了一个圆角变形的案例，css3中的一点东西。

----------效果截图----------

----------代码案例----------

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>圆角变形练习</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
/*-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；浏览器兼容性考虑*/
-webkit-border-radius: 50% 0 50% 50%;
/*-moz-border-radius：moz这个属性主要是专门支持Mozilla Firefox 火狐浏览器的；浏览器兼容性考虑*/
-moz-border-radius: 50% 0 50% 50%;
/*-o-border-radius：Opera浏览器；浏览器兼容性考虑*/
-o-border-radius: 50% 0 50% 50%;
/*border-radius：规范；浏览器兼容性考虑*/
border-radius: 50% 0 50% 50%;
/*同样是根据不同浏览器兼容性考虑*/
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 2px solid #14DBE0;
display:table;/*按照表格显示*/
margin-top: 100px;
margin-right: auto;
margin-left: auto;
}
#mess {
text-align:center;/*文本居中显示*/
display:table-cell;/*按照表格内容显示*/
vertical-align:middle;/*垂直显示*/
color:#14DBE0;
}
</style>
</head>

<body>
<div id="box">
<div id="mess">
~~~~~~~~<br>
~~~~~~~~<br>
~~~~~~~~<br>
~~~~~~~~<br>
~~~~~~~~<br>
</div>
</div>
</body>
</html>

0 0