1、CSS3边框:

  • border-radius:CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角。border:2px solid;
  • box-shadow:CSS3边框阴影。在 CSS3 中,box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
  • border-image:CSS3边框图片。通过 CSS3 的 border-image 属性,您可以使用图片来创建边框。border-image:url(border.png) 30 30 round;

  2、CSS3背景:

  • background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
  • background-origin :属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

  3、CSS3文字效果:

  • text-shadow:在 CSS3 中,text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
  • word-wrap :单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行:p{word-wrap:break-word;}

  4、CSS3 2D转换:

  transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

  • translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
  • rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
  • scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
  • skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度。
  • matrix() :

    matrix() 方法把所有 2D 转换方法组合在一起。

    matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

  5、CSS3 3D转换:

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

  6、CSS3 过渡:当元素从一种样式变换为另一种样式时为元素添加效果。

     7、CSS3动画:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

  8、CSS3多列:

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

  9、CSS3用户界面:

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

转载于:https://www.cnblogs.com/le220/p/7894544.html

第95天:CSS3 边框、背景和文字效果相关推荐

  1. CSS3边框背景-边框背景(-border-image)

    另一个令人兴奋的新特征是边框图片.有了这项功能您可以定义一个图像被用来代替正常的边框的一个组成部分.这项功能实际上是分成了几个属性:边框和边框角的形象.这两个值是: border-image: bor ...

  2. html文字底纹阴影,CSS3 彩虹背景、文字和阴影

    CSS 语言: CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100); body { over ...

  3. CSS3下的渐变文字效果实现

    background-clip + text-fill-color下的实现 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: <h2 class= ...

  4. 将竖屏视频改成横屏, 边框背景虚化技巧

    我们在浏览抖音或者快手,看到的视频大都是竖屏的,有时候为了突出视频中的主题,或许需要对视频边框做背景虚化技巧,那么我们如何把竖屏的视频改成横屏并添加边框背景虚化的效果呢?比如一个电影片段.一个搞笑视频 ...

  5. css3边框交替动画_用css3实现惊艳面试官的背景即背景动画(高级附源码)

    我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易.这篇 ...

  6. CSS3-选择器+文字+边框+背景+颜色+渐变

    文章目录 1 .介绍 CSS3的主要新特性: CSS3的属性前缀 1)主流浏览器内核 2)厂商前缀 2.CSS3选择器 1)属性选择器 2)结构性伪类 ①:root 匹配HTML标签,与body选择器 ...

  7. css3霓虹灯文字效果以及文字背景动画

    一.注意点 1.HTML5中rel属性的prefetch预加载功能 :rel='stylesheet prefetch' 2.Google字体库载入(在family加入你要的字体) <link ...

  8. css3 渐变背景 圆形,CSS 教程(5)-Css3-1,边框,背景,渐变,

    1.CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...

  9. html边框背景图片,css3 边框、背景、文本效果的实现代码

    一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...

最新文章

  1. Python九十天学习框架,从1到90,从0基础到IQ100
  2. 稀疏矩阵快速转置核心代码
  3. stm32qspi内存映射_stm32 QSPI内存映射模式
  4. 非常好用的轮播图插件
  5. React Native 常见问题集合
  6. delphi7存取配置文件与sqlserver数据库连接_Delphi7存取配置文件与SQLServer数据库连接...
  7. 安全,从写第一行代码开始!
  8. 聊聊Vue(前端Vue面试包过)【面试干货】
  9. python廖雪峰教程 学习笔记
  10. 邮箱服务器退回,发出去的邮件为什么被退回?
  11. 用SYS本地登录或远程登录引起ORA-01031错误
  12. H3C IPV6实验
  13. FR获取当前控件位置值并转换(或赋值可参考)
  14. 关于taocp的MIX[水上原创]
  15. pb 数据窗口设置操作
  16. 在office2010的情况下安装xcelsius2008的方法收集
  17. 史上最全的疫情历史数据
  18. UI设计师福利之手把手打造SVG动画应用的微场景
  19. unitoy机器人怎么联网_乐乐智能机器人怎么联网?
  20. cad面积累计lisp怎么用_CAD增强的填充面积统计插件LISP源码

热门文章

  1. 用Python实现ax²+by的图灵机【形式语言与自动机】
  2. 彻底解决VS中找不到 Windows SDK 版本 8.1的错误
  3. idea 生成sdk_如何安装独立的Android SDK,然后将其添加到Windows上的IntelliJ IDEA?
  4. tek示波器软件_给示波器以云空间,泰克发布突破性的数据协同软件TekDrive
  5. m3u8 video ios h5_移动端H5页面踩坑记
  6. java程序知识_java的基本知识点
  7. Java动态规划走金字塔_【动态规划基础】数字金字塔
  8. 读称题写出执行结果html,C++(II)13-14(2)试题B - 往年试卷
  9. java怎样用类模板创建对象_java入门(十四) | 面向对象(OOP)之类和对象
  10. 2Y叔的clusterProfiler-book阅读Chapter 2 Functional Enrichment Analysis Methods