css3和css有什么区别？简单来讲css3是css（层叠样式表）技术的升级版本，css3新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

边框border-radius:边框圆角,值为圆的直径；border-image:url('') x y round/repeat/stretch 实现边框图片环绕/平铺/拉伸，注意设置border:30px solid transparent；背景图background-size的比例乘容器设置盒子大小为背景图大小,通过background-origin调整背景图大小和位置；阴影通过box-shadow:x偏移  y偏移 阴影模糊值  阴影外延值 阴影的颜色 内阴影；文本阴影通过text-shadow: x y 偏移  颜色；如何实现自定义字体，通过@font-face提前将字体引入，有效避免用户电脑因为没有这款字体而文字变形；word-break: break-all;与word-wrap: break-word的区别在于,前者是单词折行,下面是代码展示部分:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>css3新增边框、阴影、背景、文本、字体</title>

     <style type="text/css">

     /*border-radius:边框圆角 圆角直径*/

     div#ceshi{

         width: 200px;

         height: 200px;

         background-color: #f90;

         margin-bottom: 50px;

         /* border-radius: 50%;

         border-radius: 200px; */

         border-radius: 1px 10px 30px 70px;/*顺时针*/

         border-radius: 1px 10px 30px;/*对角线*/

         border-radius: 1px 10px;

         border-radius: 10px;

     }

     /*#ceshi{

         box-shadow: 10px 20px 30px 10px purple inset;

     }*//*X偏移 Y偏移 阴影模糊值 阴影往外延伸 阴影颜色 内阴影*/

     #ceshi{

         box-shadow: 10px 20px 30px 10px red;

     }

      /* border-image:url('') X y round/repeat/stretch

     边框图片环绕/平铺/拉伸 */

     div.box{

        width: 128px;

        height: 128px;

        background-color: #ccc;

        margin: 0 auto;

        border:30px solid transparent;

        /* border-image:url('images/b.png') 20 20 round; */

        border-image-source:url('images/b.png');

        border-image-slice: 20;

        border-image-width: 10;

        border-image-outset:1;

        border-image-repeat:round;

        margin-bottom: 100px;

     }

     /*背景样式background-size*//*background-origin背景图大小和位置*/

     .pic{

         width: 400px;

         height: 300px;

         border: 10px solid red;

         background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1314383665,2282288429&fm=11&gp=0.jpg)  no-repeat;

         background-size: 50%;/*容器宽度乘百分比为背景图大小*/

         background-origin: border-box;/*边框区域*/

         background-origin: padding-box;/*内边框区域*/

         background-origin: content-box;/*有效区域*/

     }

     /*文本字体*/

     .text{

         text-shadow: 5px 1px 2px red;/*文本阴影*/

         width: 400px;

         border: 1px inset green;

         margin-top: 50px;

         word-break: break-all;/*单词折行*/

         word-wrap: break-word;

         font-family: dhnblog;

     }

     /*自定义字体类型*/

     @font-face{

         font-family:dhnblog;

         src:url('images/fzm.ttf');

     }

     </style>

     <script>

         window.onload=function(){

             var obj=document.getElementById('ceshi')

             obj.onclick=function(){

                 console.log('音乐不能阻碍工作，是为了更好的服务工作')

             }

         }

     </script>

 </head>

 <body>

     <div id="ceshi"></div>

     <div class="box">

         <img src="data:images/ft.png" alt="">

     </div>

     <div class="pic">

         今日の天気は良い今日の天気は良い今日の天気は良い今日の天気は良い

     </div>

     <div class="text">

         <p>Once the sea was difficult for the waterExcept Wushan is not a cloudYou are to me the sea and Wushan

             </p>

         <p>海が水にとって困難だったら武山は雲ではないことを除いてあなたは私にとって海と武山です</p>

         <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

         <p>Maybe program apes are not good at words, and warmth is hidden in the cold and the heat inside, but those seemingly cold codes can also be combined into the most romantic and beautiful love words. Today we take a look at how programmers put love words into romance. Code.</p>

     </div>

 </body>

 </html>

css3新增边框、阴影、边框、背景、文本、字体的更多相关文章

  1. CSS3——背景 文本 字体 链接 列表样式 表格

    背景 background-color rgb(255,0,0,1)      最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...

  2. css3新增（圆角边框(border-radius)，盒子阴影(box-shadow)，文字阴影(text-shadow)，背景缩放(background-size)）

    1.圆角边框  border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...

  3. css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）

    一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...

  4. Android 使用xml实现边框阴影，背景渐变效果（附有RGB颜色查询对照表）

    上图是显示效果,下面是代码实现: 个人理解就是使用layer-list实现两层view的叠加,其中top,left,bottom,left控制阴影 <?xml version="1.0 ...

  5. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

  6. css3新增属性有哪些？css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  7. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  8. CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  9. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

随机推荐

  1. 投入OJ的怀抱~~~~~~~~~~

    OpenJudge C20182024 信箱(1) 账号 修改设定 退出小组 管理员 frank 林舒 Dzx someone 李文新 公告 11-05 程序设计与算法(大学先修课) 成员(61910 ...

  2. 几种常见的排序方法总结（Python）

    几种常见的排序算法总结(Python) 排序算法:是一种能将一串数据依照特定顺序进行排序的一种算法. 稳定性:稳定排序算法会让原本有相等键值的记录维持相对次序.也就是如果一个排序算法是稳定的,当有两个 ...

  3. 吉哥系列故事——恨7不成妻（数位dp)

    吉哥系列故事--恨7不成妻 传送门 Problem Description 单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥 ...

  4. YUM安装软件提示[Errno 14] curl#6 - "Could not resolve host: mirrors.cloud.aliyuncs.com; 未知的错误"

    报错如下: 翻译过来就是 所以问题很简单: 第一种情况:本地DNS服务错误 第二种情况:远程主机挂了 第三种情况:远程主机地址配置错误 第一种解决方法:换DNS 首先验证一下是不是本地DNS错误 从上 ...

  5. 深入解读大厂java面试必考基本功-HashMap集合

    课程简介 HashMap集合在企业开发中是必用的集合同时也是面试官面试率很高的集合,因为HashMap里面涉及了很多的知识点,可以比较全面考察面试者的基本功,想要拿到一个好offer,这是一个迈不过的 ...

  6. selenium8中元素定位方式

    Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...

  7. Python中heapq与优先队列【详细】

    本文始发于个人公众号:TechFlow, 原创不易,求个关注 今天的文章来介绍Python当中一个蛮有用的库--heapq. heapq的全写是heap queue,是堆队列的意思.这里的堆和队列都是 ...

  8. 14、 NAT

    私有IP地址段:10.0.0.0-10.255.255.255/8172.16.0.0-172.31.255.255/12192.168.0.0-192.168.255.255/16 NAT的必要性: ...

  9. vb.net datagridview 使用方法

    目录:  1. 取得或者修改当前单元格的内容  2. 设定单元格只读  3. 不显示最下面的新行  4. 判断新增行  5. 行的用户删除操作的自定义  6. 行.列的隐藏和删除  7. 禁止列或者行 ...

  10. 如何写出优雅的Python代码？

    有时候你会看到很Cool的Python代码,你惊讶于它的简洁,它的优雅,你不由自主地赞叹:竟然还能这样写.其实,这些优雅的代码都要归功于Python的特性,只要你能掌握这些Pythonic的技巧,你一 ...