简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

关于CSS3的一些小知识

零到壹度
发布： 2018-03-21 11:42:05
原创
1107 人浏览过

本文主要和大家聊聊关于CSS3的一些小知识，希望能帮助到大家。下面跟随小编一起来看一下吧。

  1. box-shadow向 p 元素添加阴影
    box-shadow: h-shadow v-shadow blur spread color inset;
    h-shadow：必需的。水平阴影的位置。允许负值
    v-shadow：必需的。垂直阴影的位置。允许负值
    blur：可选。模糊距离
    spread：可选。阴影的大小
    color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
    inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
    2.transform：旋转 p 元素
    兼容性问题：
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); /* Opera */
    3.transition：请把鼠标指针移动到蓝色的 p 元素上，就可以看到过渡效果。
    <

    请把鼠标指针移动到蓝色的 p 元素上，就可以看到过渡效果。


    !DOCTYPE html>
<html>
<head>
<style> 
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
p:hover
{
width:300px;
}
</style>
</head>
<body>
<p></p>
    登录后复制

    注释：本例在 Internet Explorer 中无效。



以上是关于CSS3的一些小知识的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
css3
来源：php.cn
上一篇：CSS制作“正在加载”提示框 下一篇：Calc滚动条出现页面不跳动的解决方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
使页面适合移动设备吗？ 我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的html5和css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中...
来自于 2024-04-01 20:42:38
0
1
259
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！