css3新增边框、阴影、边框、背景、文本、字体

发布时间:2020-11-19 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了css3新增边框、阴影、边框、背景、文本、字体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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的区别在于,前者是单词折行,下面是代码展示部分:
  1 <!DOCTYPE html>
  2 <html lang="en"  3 head  4     meta charset="UTF-8"  5     name="viewport" content="width=device-width,initial-scale=1.0"  6     title>css3新增边框、阴影、背景、文本、字体</  7     style type="text/css"  8     /*border-radius:边框圆角 圆角直径*/
  9     div#ceshi{
 10         width: 200px;
 11         height 12         background-color #f90 13         margin-bottom 50px 14          border-radius: 50%;
 15         border-radius: 200px;  16         border-radius 1px 10px 30px 70px;顺时针 17  1px 10px 30px对角线 18  1px 10px 19  10px 20     }
 21 
 22     #ceshi{
 23         box-shadow: 10px 20px 30px 10px purple inset;
 24     }*//*X偏移 Y偏移 阴影模糊值 阴影往外延伸 阴影颜色 内阴影 25     #ceshi 26         box-shadow 10px 20px 30px 10px red 27      28 
 29       border-image:url('') X y round/repeat/stretch
 30     边框图片环绕/平铺/拉伸  31     div.box 32        width 128px 33        height 34        background-color #ccc 35        margin 0 auto 36        border30px solid transparent 37         border-image:url('images/b.png') 20 20 round;  38        border-image-sourceurl('images/b.png') 39        border-image-slice 20 40        border-image-width 10 41        border-image-outset1 42        border-image-repeatround 43        margin-bottom 100px 44      45 
 46     背景样式background-sizebackground-origin背景图大小和位置 47     .pic 48  400px 49  300px 50         border 10px solid red 51         background url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1314383665,2282288429&fm=11&gp=0.jpg)  no-repeat 52         background-size 50%容器宽度乘百分比为背景图大小 53         background-origin border-box边框区域 54  padding-box内边框区域 55  content-box有效区域 56      57 
 58     文本字体 59     .text 60         text-shadow 5px 1px 2px red文本阴影 61  62  1px inset green 63         margin-top 64         word-break break-all单词折行 65         word-wrap break-word 66         font-family dhnblog 67      68 
 69     自定义字体类型 70     @font-face 71 dhnblog 72         srcurl('images/fzm.ttf') 73      74     style 75     script 76         window.onload=function(){
 77             var objdocument.getElementById('ceshi)
 78             obj.onclick 79                 console.log(音乐不能阻碍工作,是为了更好的服务工作 80             }
 81         }
 82      83  84 body 85     div id="ceshi"></div 86     class="box" 87         img src="images/ft.png" alt="" 88      89     ="pic" 90         今日の天気は良い今日の天気は良い今日の天気は良い今日の天気は良い
 91      92     ="text" 93         p>Once the sea was difficult for the waterExcept Wushan is not a cloudYou are to me the sea and Wushan
 94              95         >海が水にとって困難だったら武山は雲ではないことを除いてあなたは私にとって海と武山です 96         >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 97         >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. 98      99 100 html>

总结


以上是前端之家为你收集整理的css3新增边框、阴影、边框、背景、文本、字体全部内容,希望文章能够帮你解决css3新增边框、阴影、边框、背景、文本、字体所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。