HTML5+CSS3+JS学习笔记-6

最新推荐文章于 2017-03-01 21:32:30 发布

PandaCode辉

最新推荐文章于 2017-03-01 21:32:30 发布

阅读量275

点赞数

分类专栏： Html5 文章标签： html5 css3

本文链接：https://blog.csdn.net/xionghui2007/article/details/53699826

版权

Html5 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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

PandaCode辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3+JS学习笔记-6

今天学习了一个圆角变形的案例，css3中的一点东西。----------效果截图--------------------代码案例----------圆角变形练习#box {width: 200px;height: 200px;/*-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
复制链接

扫一扫

专栏目录