CSS3新属性

边框:

  • border-radius 用于创建圆角
    div
    {
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px; /* Old Firefox */
    }
  • box-shadow 用于向方框添加阴影
    div
    {
    box-shadow: 10px 10px 5px #888888;
    }
  • border-image 使用图片来创建边框
    div
    {
    border-image:url(border.png) 30 30 round;  /*stretch为边框拉伸,round是平铺*/
    -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

 

     -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

 

 

      -o-border-image:url(border.png) 30 30 round; /* Opera */
}

 

背景:

  • background-size 规定背景图片的尺寸,以像素或百分比规定尺寸
  • background-origin 规定背景图片的定位区域,可以放置于 content-box、padding-box 或 border-box 区域
  • 可以放置多个背景
    body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

文本:

  • text-shadow 向文本应用阴影,规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色
    h1
    {
    text-shadow: 5px 5px 5px #FF0000;
    }
    文本阴影效果
     
  • word-wrap 允许文本强制进行换行 - 即使这意味着会对单词进行拆分
    p {word-wrap:break-word;}

字体

      @font-face 规则

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */
}div
{
font-family:myFirstFont;
}
</style>

 

2D变化

  • translate() 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
  • rotate() 元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
  • scale() 元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
    div
    {
    transform: scale(2,4);
    -ms-transform: scale(2,4);	/* IE 9 */
    -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
    -o-transform: scale(2,4);	/* Opera */
    -moz-transform: scale(2,4);	/* Firefox */
    }  /*值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
  • skew() 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
  • matrix() 把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素

3D变化:

  • rotateX() 元素围绕其 X 轴以给定的度数进行旋转
  • rotateY() 元素围绕其 Y 轴以给定的度数进行旋转。

过渡:transition元素从一种样式逐渐改变为另一种的效果,区别2D3D是过渡有一个变化过程

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长
    div
    {
    transition: width 2s;
    -moz-transition: width 2s;	/* Firefox 4 */
    -webkit-transition: width 2s;	/* Safari 和 Chrome */
    -o-transition: width 2s;	/* Opera */
    }
    div:hover
    {
    width:300px;
    }/*当鼠标指针悬浮于 <div> 元素上时宽度变化,当指针移出元素时,它会逐渐变回原来的宽度*/

动画:过渡设置元素属性的变化过程,动画可以设置自身属性和元素所在位置的变化

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myfirst //动画名称 
{ 0% {background: red;} //各时刻变化的css样式
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation: myfirst 5s;  //动画名称  动画时间
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

多列:

  • column-count 规定元素应该被分隔的列数
  • column-gap 规定列之间的间隔
  • column-rule 设置列之间隔断的宽度、样式和颜色规则。

用户界面:

  • resize 规定是否可由用户调整元素尺寸
  • box-sizing 允许您以确切的方式定义适应某个区域的具体内容
  • outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

 

 

转载于:https://www.cnblogs.com/clairexia/p/6636916.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/284116.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android实用笔记——使用Spinner实现下拉列表

2019独角兽企业重金招聘Python工程师标准>>> 1、编辑activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"mat…

基于.NET 6 的开源访客管理系统

简单介绍一下系统功能系统用于简化访客登记、查询、保存。传统的登记方式&#xff0c;不仅浪费纸张&#xff0c;而且还面临保存的问题&#xff0c;查阅不方便。该系统为了在疫情期间能很好管理访客登记做好风险管控,同时可以整合智能设备做到自动确认并跟踪访客的行动轨迹,该项…

完整的产品管理工作流程

产品经理的工作具体会落实到工作流程中&#xff0c;所以工作流程很大程度上会体现工作层次。很多白领产品经理&#xff0c;多年来在一个低层次的流程中转圈——理需求、画原型、写文档、管项目、验收上线&#xff0c;一个版本上线之后立刻对下一个版本理需求、画原型、写文档、…

java爬虫-简单爬取网页图片

刚刚接触到“爬虫”这个词的时候是在大一&#xff0c;那时候什么都不明白&#xff0c;但知道了百度、谷歌他们的搜索引擎就是个爬虫。 现在大二。再次燃起对爬虫的热爱&#xff0c;查阅资料&#xff0c;知道常用java、python语言编程&#xff0c;这次我选择了java。在网上查找的…

扩展方法必须在非泛型静态类中定义

扩展方法必须在非泛型静态类中定义&#xff1a;public class CustomerHelperClass{public static MvcHtmlString CreateImage(string p_w_picpathSource, string altText, string width, string height){//通过TagBulider创建标签TagBuilder p_w_picpathTag new TagBuilder(&…

Windows Server 2016-图形化迁移FSMO角色

上章节我们简单介绍了三种不同方式查看FSMO主机角色信息&#xff0c;在开篇之前我们简单回顾一下FSMO五种操作主机角色&#xff1a;林范围操作主机角色有两种&#xff0c;分别是 架构主机角色&#xff08;Schema Master&#xff09;和 域命名主机角色&#xff08;Domain Naming…

C# WPF设备监控软件(经典)-下篇

上节已经对本软件的功能和意图进行了详细讲解&#xff0c;这节就不再啰嗦&#xff0c;本节主要对功能实现和代码部分展开讲解.01—前台代码前台XAML:<Window x:Class"EquipmentMonitor.EquipmentView"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/pr…

[转]互联网最大谣言:程序员35岁必淘汰?今天我就来击碎他

朋友&#xff0c;只要你是程序员&#xff0c;你一定知道996和“程序员35岁必死”的言论。 这两个话题在互联网上的讨论一次比一次激烈。 996工作制&#xff0c;众所周知&#xff0c;每天早上9点到岗&#xff0c;一直待到晚上9点&#xff0c;每周工作6天&#xff0c;很多互联网公…

【ArcGIS微课1000例】0057:将多波段栅格(影像.tif)背景设置为无数据nodata的方法

本文讲解将多波段栅格(影像.tif)背景设置为无数据nodata的方法。 文章目录 一、背景值识别二、背景值去除【推荐阅读】: 【ArcGIS微课1000例】0056:将单波段栅格背景设置为无数据NoData的方法 一、背景值识别 可以用【识别】工具来获取影像数据的背景值。 在背景上单击,…

华为HCIA认证H12-811题库新增

801、[单选题]178/832、在系统视图下键入什么命令可以切换到用户视图? A quit B souter C system-view D user-view 试题答案&#xff1a;A 试题解析&#xff1a;在系统视图下键入quit命令退出到用户视图。因此答案选A。 802、[单选题]“网络管理员在三层交换机上创建了V…

经典Java微服务架构教程 微服务从开发到部署

图书目录脑图&#xff1a; 本书根据开源项目整理&#xff0c;由于原在线文档无法正常使用&#xff0c;本人重新在Github上重新布署了一套在线文档。 书中讲解非常详细&#xff0c;并且有在线的视频教程&#xff0c;另有在线文档和在线的源码。 书中的代码由于PDF排版问题可能显…

linux下redis安装

转自&#xff1a;http://blog.java1234.com/blog/articles/311.html Redis从一开始就只支持Linux&#xff0c;后面虽然有团队搞出Window版本&#xff0c;但是我还是建议大伙安装到Linux中。 准备工作 &#xff08;wm VirtualBox&#xff09; VMware 以及Xshell https://redis…

cobbler koan自动重装系统

介绍 koan是kickstart-over-a-network的缩写&#xff0c;它是cobbler的客户端帮助程序&#xff0c;koan允许你通过网络提供虚拟机&#xff0c;也允许你重装已经存在的客户端。当运行时&#xff0c;koan会从远端的cobbler server获取安装信息&#xff0c;然后根据获取的安装信息…

Quartz.NET simple_demo

Quartz.NET是一个开源的作业调度框架&#xff0c;非常适合在平时的工作中&#xff0c;定时轮询数据库同步&#xff0c;定时邮件通知&#xff0c;定时处理数据等。 Quartz.NET允许开发人员根据时间间隔&#xff08;或天&#xff09;来调度作业。它实现了作业和触发器的多对多关系…

Hello Playwright:(9)执行 JavaScript 代码

Playwright 提供了大量的 API 用于与页面元素交互&#xff0c;但是在某些场景下还是不能完全满足要求。比如我们需要获得包括元素本身的 HTML&#xff0c;但是目前只有下列 API :InnerHTMLAsync 返回元素内的 HTML 内容InnerTextAsync 返回元素内的文本内容而使用 JavaScript 执…

【PhotoScan精品教程】photoscan无法启动此程序,因为计算机中丢失cholmod.dll解决办法

安装完航测软件photoscan&#xff0c;打开时提示&#xff1a;无法启动此程序&#xff0c;因为计算机中丢失 cholmod.dll解决办法。 错误提示&#xff1a; 解决办法&#xff1a; 并不是缺少该动态链接库文件&#xff0c;而是补丁文件拷贝错了。

什么是中台?企业为什么要建中台?从数据中台到AI中台。

从去年开始&#xff0c;好像就有一只无形的手一直将我与“微服务”、“平台化”、“中台化”撮合在一起&#xff0c;给我带来了很多的困扰和思考与收获。 故事的开始源于去年的技术雷达峰会&#xff0c;我在会上做了一场关于平台崛起的主题分享&#xff08;《The Rise of Plat…

老司机带你重构Android的v4包的部分源码

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。https://www.jianshu.com/p/a08d754944c4 转载请标明出处&#xff1a;https://www.jianshu.com/p/a08d754944c4 本文出自 AWeiLoveAndroid的博客 【前言】过年回家忙着干活&#xff0c;忙着给亲戚的孩…

.NET静态代码织入——肉夹馍(Rougamo) 发布1.1.0

肉夹馍是什么肉夹馍(https://github.com/inversionhourglass/Rougamo)通过静态代码织入方式实现AOP的组件。.NET常用的AOP有Castle DynamicProxy、AspectCore等&#xff0c;以上两种AOP组件都是通过运行时生成一个代理类执行AOP代码的&#xff0c;肉夹馍则是在代码编译时直接修…

Msys2 国内源(2017.3.30)

确定可用&#xff01; Server https://mirrors.tuna.tsinghua.edu.cn/msys2/msys/$arch转载于:https://www.cnblogs.com/baud/p/6644887.html