一、文本新增样式

　　opacity 不透明度

  1.         h1{
  2.                 margin: 100px auto;
  3.                 opacity: 0.5;
  4.             }
  5.         </style>
  6.     </head>
  7.  
  8.     <body>
  9.         <h1>中山大学</h1>
  10.     </body>

效果

　　rgba透明度（选中的就透明）一般应用在背景透明，文字不透明。是rgb的一个拓展，a的值在（0,1）之间，就是针对前面的颜色的一个透明度/不透明度的描述.

　　

  1. 　　h1{
  2.             margin: 100px auto;
  3.             color: rgba(255, 0, 0, 0.8);文字的（255,0,0）颜色的不透明度为0.8
  4.             background-color: rgb(1,1,1);
  5.         }
  6.     </style>
  7.     </head>
  8.     <body>
  9.         <h1>中山大学</h1>
  10.     </body>

　　text-shadow:文字阴影，可以多层，阴影值之间可以用逗号隔开。前两个设置是偏移量，后面是模糊程度。
　　实战：做一个浮雕文字和文字模糊的效果
　　浮雕文字：

  1.         h1{
  2.         margin: 200px auto;
  3.         color: white;
  4.         text-shadow: black 1px 1px 10px;
  5.  
  6.     }
  7.     </head>
  8.     <body>
  9.         <h1>中山大学</h1>
  10.     </body>

效果：

文字模糊（悬浮在文字上面就出现模糊）：

  1.     h1{
  2.         text-align: center;
  3.         color: black;
  4.     }
  5.     h1:hover{
  6.         color: white;
  7.         text-shadow: black 1px 1px 100px;
  8.     }
  9.     </style>
  10.     </head>
  11.     <body>
  12.         <h1>中山大学</h1>
  13.     </body>

效果前后：

　　文字描边：

　　　　简介：CSS text-stroke属性的语法并不复杂，和border，background属性类似，其实是若干个CSS属性合并后的名称写法，不过仅仅是下面这两个CSS属性合体：text-stroke-width和text-stroke-color，也就是描边的宽度和描边的颜色，和border不同，对于text-stroke属性，我们无法指定描边的类型，只能是实线描边，不支持点线或者虚线，也无法指定描边是外描边还是内描边还是居中描边。

具体操作实现的代码如下：

  1.         div{
  2.                 font-size: 50px;
  3.                 text-align: center;
  4.                 margin: 100px auto;
  5.                 -webkit-text-stroke: 2px pink;
  6.             }
  7.  
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <div >
  12.             中山大学
  13.         </div>

效果：

　　文字排版　　

　　direction：控制文字的方向，一定要配合unicode-bid:bidi-override;来使用。

  1.             div{
  2.             width: 200px;
  3.             height: 200px;
  4.             margin: 0px auto;
  5.             border: 1px solid;
  6.             direction: rtl;
  7.  
  8.         }
  9.         </style>
  10.     　　</head>
  11.    　　 <body>
  12.     　　<div >
  13.         　　中山大学
  14.    　　 </div>

　　溢出省略号

1、首先多余的数据不让它进行换行

(white-space: nowrap;
overflow: hidden;)

2、再使他出现省略号（text-overflow: ellipsis;）
text-overflow ：确定如何向用户发出未显示的溢出内容信号
它可以被剪切
显示一个省略号（‘.....’）

  1.     div{
  2.                 width: 200px;
  3.                 height: 200px;
  4.                 margin: 0px auto;
  5.                 border: 1px solid;
  6.                 white-space: nowrap;
  7.                 overflow: hidden;
  8.                 text-overflow: ellipsis;
  9.             }
  10.  
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div >
  15.             中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学中山大学
  16.         </div>
  17.     </body>

效果：

二、盒模型新增样式

　　盒模型阴影
　　默认值：none 不可继承
　　值：inset
　　默认阴影在边框外，使用inset后，阴影在边框内
　　《offset-x》和《offset-y》
　　这是头两个《length》值，用来设置阴影偏移量。
　　《offset-x》设置水平偏移量，如果是负值则阴影位于元素左边
　　《offset-y》设置垂直偏移量，如果是负值则阴影位于元素上面
　　如果两者都是0，那么阴影位于元素后面。
　　这是如果设置了《blur-radius》或《spread-radius》则有模糊效果
　　《spread-radius》
　　这是第四个《length》值，取正值时，阴影扩大，取负值时，阴影收藏。默认为0，此时阴影与元素同样大。
　　《color》
　　阴影颜色，如果没有指定，则由浏览器决定。
　　不一样的颜色阴影用逗号隔开，第一个展示在最上面。

　　代码：

盒子居中代码并且出现盒子阴影：

  1. 　　　　div{
  2.             position: absolute;
  3.             width: 200px;
  4.             height: 200px;
  5.             left: 0;
  6.             right: 0;
  7.             top: 0;
  8.             bottom: 0;
  9.             margin: auto;
  10.             background: pink;
  11.             text-align: center;
  12.             line-height: 200px;
  13.             box-shadow: inset 10px 10px 10px 10px black;（盒子阴影）
  14.         }
  15.  
  16.             </style>
  17.         </head>
  18.         <body>
  19.             <div >
  20.                 test
  21.             </div>

效果：

　　（2）图片倒影

　　首先实现图片的居中，可以根据上面那种方式实现居中，也可以根据以下方式实现居中

  1. 　　　　html,body{
  2.                 height: 100%;
  3.             }
  4.             body{
  5.                 text-align: center;
  6.             }
  7.             body:after{
  8.                 content: '';
  9.                 display: inline-block;
  10.                 height: 100%;
  11.                 vertical-align: middle;
  12.             }
  13.             img{
  14.                 vertical-align: middle;
  15.             }
  16.             因为img都是看做是替换元素，都是inline级别的元素，两个inline级别的元素，就都可以进行一个垂直居中，谁高就听谁的，after最高。
  17.             vertical-align: middle;
  18.             body的高度一定要百分之一百，要不然就只是图片的高度

接下来实现图片倒影

　　-webkit-box-reflect 设置元素的倒影（准确来说不算是css3的东西，类似文字描边，）
　　默认值：none 不可继承
　　值：（必须是123的顺序）
　　倒影的方向
　　第一个值，above，below，right，left
　　倒影的距离
　　第二个值，长度单位
　　渐变
　　第三个值

resize

　　css允许你控制一个元素的可调整大小性
　　（注意，一定要配合overflow:auto来使用）
　　默认值：none 不可以继承
　　值：
　　none
　　元素不能被用户缩放
　　both 允许用户在水平和垂直方向上调整元素的大小。
　　horizontal
　　允许用户在水平方向上调整元素的大小
　　vertical
　　允许用户在垂直方向上调整元素的大小

代码：

  1.             body{
  2.                 text-align: center;
  3.             }
  4.             body:after{
  5.                 content: '';
  6.                 display: inline-block;
  7.                 height: 100%;
  8.                 vertical-align: middle;
  9.             }
  10.             div{
  11.                 display: inline-block;
  12.                 vertical-align: middle;
  13.                 height: 200px;
  14.                 width: 200px;
  15.                 background: pink;
  16.                 overflow: auto;
  17.                 resize: horizontal;
  18.             }

　　box-sizing的作用是width和height的大小不会因为padding而撑大，会在此大小基础上，使得pading在里面生效，真正的width变小了（就是加边框那些就不会破坏布局）参数有（border-box，content-box，padding-box）

在这里讲一下另外一种居中方式（第三种）

  1.                 div{
  2.                 width: 200px;
  3.                 height: 200px;
  4.                 position: absolute;
  5.                 left: 50%;
  6.                 top: 50%;
  7.                 background: pink;
  8.                 margin-left: -100px;
  9.                 margin-top: -100px;
  10.             }

新增UI样式

（1）圆角
border-radius(50%刚好是正方形的一个圆，大的话也是，小就不是一个圆，椭圆了)
css的新增的样式都是为了提高性能和提高用户体验
默认值：0 不可继承
值：
固定的px值定义圆形半径或者椭圆的半长轴，半短轴。不能用负值
使用百分数定义圆形半径或椭圆的半长轴。水平半轴相对于盒模型的宽度，垂直半轴相对于盒模型的高度，不能用负值。

这是一个简写属性，用来设置
border-top-left-radius,
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
还可以多个值，代表不一样的形状。（在移动端，尽量使用px值）
半径的第一个语法取值可取-~4个值
border-radius：radius
border-radius：top-left-and-bottom-right top-right-and-bottom-left
border-radius：top-left top-right-and-bottom-right bottom-right
border-radius：top-left top-right bottom-right bottom-left
半径的第二个语法值也可取1~4个值
border-radius：(first radius values)/radius
border-radius：(first radius values)top-left-and-bottom-right top-right-and-bottom-left
border-radius：(first radius values)top-left top-right-and-bottom-right bottom-right
border-radius：(first radius values)top-left top-right bottom-right bottom-left

  1. border-radius: 50%;=border-radius: 100px

  1. border-radius: 100px/50px 50px;

实战：制作风筝

画出四个小容器（div）分别有缝隙，然后制作圆角实现

代码：

  1. <style type="text/css">
  2.     *{
  3.       margin: 0;
  4.       padding: 0;
  5.     }
  6.     /*去掉系统的滚动条功能*/
  7.     html,body{
  8.       height: 100%;
  9.       overflow: hidden;
  10.     }
  11.     #wrap{
  12.       position: absolute;
  13.       width: 300px;
  14.       height: 300px;
  15.       left: 0;
  16.       right: 0;
  17.       top: 0;
  18.       bottom: 0;
  19.       margin: auto;
  20.       transition: 2s;
  21.  
  22.     }
  23.     #wrap>div{
  24.       margin: 10px;
  25.       width: 130px;
  26.       height: 130px;
  27.       border: 1px solid black;
  28.       float: left;
  29.       box-sizing: border-box;
  30.       background: deeppink;
  31.  
  32.     }
  33.     #wrap div:nth-child(1),#wrap div:nth-child(4){
  34.       border-radius: 0 60%;
  35.     }
  36.     #wrap div:nth-child(2),#wrap div:nth-child(3){
  37.       border-radius: 60% 0;
  38.     }
  39.     #wrap:hover{
  40.       transform: rotate(45deg);
  41.     }
  42.   </style>
  43. </head>
  44. <body>
  45.  
  46. <div id="wrap">
  47.   <div></div>
  48.   <div></div>
  49.   <div></div>
  50.   <div></div>
  51. </div>

对话框实现

注意：after和before一定要给内容

要给相对定位和绝对定位

  1. #wrap{
  2.       width: 400px;
  3.       height: 200px;
  4.       border: 1px solid;
  5.       border-radius: 50%;
  6.       text-align: center;
  7.       line-height: 200px;
  8.       position: relative;
  9.     }
  10.     #wrap:before{
  11.  
  12.       content: '';
  13.       display: block;
  14.       width: 80px;
  15.       height: 80px;
  16.       border: 1px solid;
  17.       position: absolute;
  18.       right: -100px;
  19.       bottom: -100px;
  20.       border-radius: 50%;
  21.     }
  22.     #wrap:after{
  23.       content: '';
  24.       width: 60px;
  25.       height: 60px;
  26.       border: 1px solid;
  27.       display: block;
  28.       position: absolute;
  29.       right: -20px;
  30.       bottom: -20px;
  31.       border-radius: 50%;
  32.  
  33.     }
  34.  
  35.   </style>
  36. </head>
  37. <body>
  38.  
  39. <div id="wrap">
  40.   大家好，欢迎光临
  41. </div>

效果：

css新增UI方案的更多相关文章

  1. css新增UI样式

    1.圆角 border-radius <style> .box{width:200px;height:300px;border:1px solid #000;border-radius:1 ...

  2. css选择器和新增UI样式总结

    经过两天的学习,初步对css3选择器和新增UI样式有了进一步的理解.

  3. CSS3新的UI方案

    文本新增样式 一.opacity:指定了一个元素的透明度 0~1 二.新增颜色模式rgba:很好的解决了背景透明,字体颜色不透明的需求. 三.文字阴影:text-shadow用来为文字添加阴影,而且可 ...

  4. （转）[Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统) 内附unused-assets清除实例

    转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17.   http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html   ...

  5. [Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统)

    转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17.   http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html   ...

  6. [前端开发] 8 个很有用的免费CSS的UI工具箱

    搞web开发的不能不提到前端,下面就和大家分享下8个很有用的免费CSS的UI工具箱 1) UI CSS ui.css 是一个用来创建简洁的 Web 用户界面的工具,下载的文件只包含一个 css 文件. ...

  7. 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +

    (1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...

  8. boi剖析 - 基于webpack的css sprites实现方案

    本文是58到家前端工程化集成解决方案boi的博文系列之一.boi是基于webpack打造的一站式前端工程化解决方案,现已开源Github. 作为前端构建工具不可或缺的一个环节,自动生成css spri ...

  9. css初始化代码方案

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...

随机推荐

  1. 面试：HashSet怎么判断重复

    HashSet是基于HashMap实现的,元素的值存储在key上,value的值所有元素都一样,都是这个 private static final Object PRESENT = new Objec ...

  2. 树莓派安装OSMC打造家庭影院，还可以看优酷和CCTV

    1.OSMC是什么? OSMC是树莓派官方推荐的影音系统,是一款开源的操作系统,是Openelec的升级版,同样是基于Kodi的开源项目.OSMC,使用它可以将树莓派打造成一款全功能的家庭影院系统,它 ...

  3. 20155328 《Java程序设计》实验三 敏捷开发与XP实践 实验报告

    一.编码标准 编程标准包含:具有说明性的名字.清晰的表达式.直截了当的控制流.可读的代码和注释,以及在追求这些内容时一致地使用某些规则和惯用法的重要性. 下面是没有最基本的缩进的一个程序: publi ...

  4. 20155332 如何获取新技能+c语言学习调查

    如何获取新技能+c语言学习调查 你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...

  5. 20155333 2016-2017-2《Java程序设计》第二周学习总结

    20155333 2016-2017-2<Java程序设计>第二周学习总结 教材学习内容总结 1. Java 类型系统:基本类型和类类型(参考类型) 2. 基本类型: 整数:short整数 ...

  6. Mysql优化分页

    背景: 库里面有张表,日增数据量百万条: 之前查询: SELECT * FROM `res_battery_data_history` LIMIT 1797000,10;

  7. 【LG5055】可持久化文艺平衡树

    [LG5055]可持久化文艺平衡树 题面 洛谷 题解 终于不可以用\(Trie\)水了... 和普通的\(FHQ\;treap\)差不多 注意一下\(pushdown\).\(split\)要新开节点 ...

  8. Jumpserver跳板机入门

    1.jumpserver安装 1.1.环境介绍 系统: CentOS 7.4.1708IP: 192.168.56.110 [root@linux-node1 ~]# uname -r -.el7.x ...

  9. idea 从javadoc中复制内容出来

    打开 tool window就行了 经验:百度google不到的东西太多了,要学会自己想办法,至少也要把功能都试一遍吧, 而且像这种东西官方一般会给方法实现你的目的,只不过有时候是把功能迁移了或者整合 ...

  10. 不会Python开发的运维终将被淘汰？

    Python语言是一种面向对象.直译式计算机程序设计语言,由Guido van Rossum于1989年底发明.Python语法简捷而清晰,具有丰富和强大的类库,具有可扩展性和可嵌入性,是现代比较流行 ...