017新增UI方案

最新推荐文章于 2022-10-13 15:27:53 发布

Manta__

最新推荐文章于 2022-10-13 15:27:53 发布

阅读量146

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104872122

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

盒模型阴影
box- shadow
　　-以逗号分割列表来描述个或多个阴影效果，可以用到几乎任何元素上。如果元素同时设置了border-radius，阴影也会有圆角效果。多个阴影时和多个text shadows规则相同(第-个阴影在最上面)。
快认值:none 不可继承
值:
　　-inset默认阴影在边框外。使用inset后，阴影在边框内。
　　-<offset- X> <offset-y>，用来设置阴影偏移量。
　　　　<offset- x>设置水平偏移里，如果是负值则阴影位于元素左边。
　　　　<offset-y>设置垂直偏移量，如果是负值则阴影位于元素上面。
　　　　如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius>或<spread-radius>则有模糊效果。
　　-<blur-radius>
　　　　这是第三个值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。
　　-<spread- radius>
　　　　这是第四个值。正值时，阴影扩大;取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
　　-<color>
　　　　阴影颜色，如果没有指定，则由浏览器决定

<style>
.box{
 　　width:100px;
 　　height:100px;
 　　margin:100px;
 　　background:Red; 
 　　box-shadow:0 0 20px 30px #000,inset 0 0 30px yellow;
　}
　</style>
</head>
<body>
　<div class="box"></div>
</body>

在这里插入图片描述

盒模型倒影(webkit内核文字描边背景镂空，，可渐变倒影)
webkit- box-reflect 设置元素的倒影(准确的来说不能算是css3的东西，但需要大家知道)
默认值:none不可继承
值: ( 必须是123的顺序)
-倒影的方向
　　第一个值，above, below, right, left
-倒影的距离
　　第二个值，长度单位
-渐变
　　第三个值

<style>
body{ background:#000;}
img{
 width: 200px;
 display:block;
 margin:200px auto;
 -webkit-box-reflect:right 10px linear-gradient(-90deg,rgba(0,0,0,1) 0,rgba(0,0,0,0) 80%);
 }
</style>
</head>
<body>
<img src="../img/person1.png" />
</body>

在这里插入图片描述

resize :
　　-CSS属性允许你控制一个元素的可调整大小性。(定要配合overflow: auto使用)
默认值: none不可继承
值:
-none
　　元素不能被用户缩。
-both
　　允许用户在水平和垂直方向上调整元素的大小。
-horizontal
　　允许用户在水平方向上调整元素的大小。
-vertical
　　允许用户在垂直方向上调整元素的大小。

<style>
.box{
 　width:100px;
 　height:100px;
 　background:url(../img/person1.png);
 　/*background-size: 100%;*/
　 border:5px solid #000; 
 　resize:both; 
 　overflow:auto;
}
</style>
</head>
　<body>
　　<div class="box"></div>
　</body>

box-sizing:
　　-允许以特定的方式定义匹配某个区域的特定元素。
默认值：content-box
继承性： no
-content- box
默认值，标准盒子模型。width 与height 只包括内容的宽和高，不包括边框(border)，内边距(padding)，外边距（margin)。
注意:内边距,边框&外边距都在这个盒子的外部。
宽度和高度分别应用到元素的内容框。
　　在宽度和高度之外绘制元素的内边距和边框。
比如.如果.box {width: 350px};而且{border: 10px ;}那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式:
width =内容的宽度，
height =内容的高度。
宽度和高度都不包含内容的边框（border)和内边距(padding)
-border-box
width和height属性包括内容，内边距和边框，但不包括外边距这是当文档处于Quirks模式时Internet Explorer使模型。
为元素设定的宽度和高度决定了元素的边框盒。
　　就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
　　通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

这里的维度计算为:
width = border + padding +内容的width,
height = border + padding +内容的heighto

-inherit
　　规定应从父元素继承 box-sizing 属性的值。

传统的圆角生成方案，必须使用多张图片作为背景图案
CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点:
-减少维护的工作重。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等) , 背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况

border-radius
-用来设置边框圆角。当使用一个半径时确定-个圆形;当使用两个半径时确定- -个椭圆，这个(椭)圆与边框的交集形成圆角
效果。
在这里插入图片描述
默认值: 0不可继承
值:
-固定的px值定义圆形半径或椭圆的半长轴，半短轴。不能用负值
-使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度:垂直半轴相对于盒模型的高度。不能用负值
这是一个简写属性，用来设置
border- top-left-radius,
border- top-right-radius,
border- bottom-right-radius，
border- bottom-left-radius

border-top-left-radius:200px;//左上 
 border-top-right-radius:200px;//右上 
 border-bottom-right-radius:200px;//右下 
 border-bottom-left-radius:200px;//左下

半径的第一个语法取值可职1~4个值:
border-radius: radius//四个
border-radius: top-left- and-bottom-right top-right- and-bottom-left//主对角副对角
border-radius: top-left top-right- and-bottom-left 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-ight top-right- and-bottom-left//主对角副对角
border-radius: (first radius values) / top-left top- right- and- bottom-left bottom- right//左上副对角右下
border-radius: (first radius values) / top-left top- right bottom-right bottom-lef
border-radius:10px 20px 30px 40px/20px 50px 30px 10px; 斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。
border-radius:10px 20px 40px/20px 50px 斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。两个值、三个值的顺序规则，跟上面一样的
注意
百分比值
-水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。
-在旧版本的Chrome和Safari中不支持。(fixed in Sepember 2010)在11.50版本以前的Opera中实现有问题。

风车例子
  <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{
 width:400px;
 height:400px;
 margin:50px auto; 
 transition:5s linear;
}
.box div{
 width:180px;
 height:180px;
 margin:10px;
 border:1px solid #000; 
 box-sizing:border-box;
 float:left;
 background:pink;
}
.box div:nth-child(1),.box div:nth-child(4){ 
 border-radius:0 60%;
}
.box div:nth-child(2),.box div:nth-child(3){ 
 border-radius:60% 0;
}
.box:hover{
 transform:rotate(720deg);
}
</style>
</head>
<body>
<div class="box">
 <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

在这里插入图片描述

对话框例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>talk</title>
<style type="text/css">
div {
 position: relative;
 width: 500px;
 height: 300px;
 border: 1px solid black;
 border-radius: 50%;
 font-size: 24px;
 font-weight: bold;
 text-align: center;
 line-height: 300px;
}
div:before,
div:after {
 position: absolute;
 content: "";
 display: block;
 border: 1px solid black;
 border-radius: 50%;
}
div:before {
 width: 50px;
 height: 50px;
 bottom: -25px;
 right: 25px;
}
div:after {
 width: 20px;
 height: 20px;
 bottom: -50px;
 right: 0;
}
</style>
</head>
<body>
 <div>大家好，欢迎来到尚硅谷！</div>
</body>
</html>

在这里插入图片描述

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
017新增UI方案

box- shadow以逗号分割列表来描述-个或多个阴影效果，可以用到几乎任何元素上。如果元素同时设置了border-radius，阴影也会有圆角效果。多个阴影时和多个text shadows规则相同(第-个阴影在最上面)。快认值:none 不可继承值:inset默认阴影在边框外。使用inset后，阴影在边框内。这是头两个dength>值，用来设置阴影偏移量。设置水...
复制链接

扫一扫

专栏目录