您的位置：首页 > Web前端 > JavaScript

HTML5+CSS3+JS学习笔记-6

2016-12-16 21:52 721 查看

今天学习了一个圆角变形的案例，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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航