Css_新UI方案

最新推荐文章于 2023-03-30 14:36:21 发布

星宇非凡

最新推荐文章于 2023-03-30 14:36:21 发布

阅读量134

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42595216/article/details/101385312

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Css_新UI方案

圆角
border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给“/”则水平和垂直一样
border-radius: 10px/5px;
参数
各种长度单位都可以：px，%，…
%有时很方便
但宽高不一致时不太好
用法
1个：都一样
border-radius: 一样
2个：对角
border-radius: 左上&右下右上&左下
3个：斜对角
border-radius: 左上右上&左下右下
4个：全部，顺时针
border-radius: 左上右上右下左下

<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px;}
</style>
<body>
<div class="box"></div>
</body>

<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px;}
</style>

<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px 80px;}
</style>

<style>
.box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}
</style>

<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:url(new_bg.png) no-repeat;}
.box div:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}
.box div:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}
.box:hover{ -webkit-transform:rotate(720deg);}
</style>
<body>
<div class="box">
	<div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>

边框
边框图片 border-image
border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式
round 平铺,repeat 重复,stretch拉伸
边框颜色 border-colors
线性渐变
线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上
IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
参数
起点：从什么方向开始渐变默认：top
left、top、left top
角度：从什么角度开始渐变
xxx deg的形式
点：渐变点的颜色和位置
black 50%，位置可选
线性渐变实例
最简单
red, green
从上到下
起点位置
left top, red, green
30deg, red, green
逆时针
repeating-linear-gradient
线性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px
配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
实例：百度音乐图片光影效果

<style>
.box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}
</style>
<body>
<div class="box"></div>
</body>

<style>
.box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);}
</style>

<style>
.box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red 0,blue 50%,green 100%);}
</style>

<style>
.box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-repeating-linear-gradient(60deg,red 0,blue 30px);}
</style>

<style>
.wrap{width:200px;height:30px;overflow:hidden;border:1px solid #000;}
.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px); transition:3s;}
.wrap:hover .box{ margin-left:-100px;}
</style>
<body>
<div class="wrap">
	<div class="box"></div>
</div>
</body>

<style>
.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png) no-repeat; transition:1s;}
.box:hover{background-position:300px 0,-100px -100px;}
</style>

径向渐变
radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;

注意firefox目前只支持关键字
背景
多背景

<style>
.box{width:200px;height:200px;background:-webkit-radial-gradient(red,blue);}
</style>

<style>
.box{width:200px;height:200px;background:-webkit-radial-gradient(100px 50px,red,blue);}
</style>

<style>
.box{width:200px;height:200px;background:-webkit-radial-gradient(100px 50px,circle,red,blue);}
</style>

<style>
.box{width:300px;height:300px;border:1px solid #000;float:left;margin:10px;}
.box:nth-child(1){ background:-webkit-radial-gradient(100px 50px,closest-side,red,blue);}
.box:nth-child(2){ background:-webkit-radial-gradient(100px 50px,closest-corner,red,blue);}
.box:nth-child(3){ background:-webkit-radial-gradient(100px 50px,farthest-side,red,blue);}
.box:nth-child(4){ background:-webkit-radial-gradient(100px 50px,farthest-corner,red,blue);}
.box:nth-child(5){ background:-webkit-radial-gradient(100px 50px,contain ,red,blue);}
.box:nth-child(6){ background:-webkit-radial-gradient(100px 50px,cover ,red,blue);}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>

逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
Background-position:300px 0,-100px -100px;
背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
background-origin ： border | padding | content
border-box：从border区域开始显示背景。
padding-box：从padding区域开始显示背景。
content-box：从content区域开始显示背景。
background-clip
border：从border区域向外裁剪背景。
padding：从padding区域向外裁剪背景。
content：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。

<style>
body{ background:#ccc;}
.box{width:300px;height:300px;border:10px solid #000; background:url(miaov.jpg) no-repeat; background-size:100% 100%;}
</style>

<style>
body{ background:#ccc;}
.box{width:300px;height:300px;border:10px solid #000; background:url(miaov.jpg) no-repeat, url(miaov2.jpg) no-repeat 0 bottom; background-size:contain,100px 100px;}
</style>

<style>
body{background:#ccc;}
.box{width:200px;height:200px;background:url(miaov.jpg) no-repeat 0 0; border:10px solid rgba(0,0,0,0.5);padding:50px; background-origin:content-box;}
</style>

//文字 背景裁切
<style>
.box{width:300px;height:300px;background:url(miaov.jpg) center;border:30px solid rgba(0,0,0,0.5); -webkit-background-clip:text;padding:50px; font:bold 120px/150px "微软雅黑"; text-align:center;color:rgba(0,0,0,0); transition:1s;}
.box:hover{ background-position:-200px -200px;}
</style>
<body>
<div class="box">妙味课堂</div>
</body>

实例：iphone开机动画

<style>
body{background:#000; text-align:center; font:50px/200px "微软雅黑";}
h1{ display:inline-block;color:rgba(255,255,255,0.3);
 background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,1) 240px,rgba(255,255,255,0) 300px) -300px 0 no-repeat; 
 -webkit-background-clip:text;}
</style>
<body>
<h1>MioaV妙味课堂</h1>
<script>
var oH1=document.getElementsByTagName("h1")[0];
var oTimer=null;
var iLeft=-300;
document.title=0;
function toMove()
{
	oTimer=setInterval(function(){
		iLeft+=10;
		if(iLeft==1000)
		{
			iLeft=-300;
			clearInterval(oTimer);
		}
		oH1.style.backgroundPosition=iLeft+"px 0px";
			
	},20);
}
toMove();
setInterval(function(){
	toMove();	
},5000);
</script>
</body>

遮罩
Mask-image
Mask-position
Mask-repeat
实例：特殊形状的幻灯片效果

<style>
.box{width:800px;height:600px; background:url(miaov.jpg) no-repeat;background-size:100% 100%; -webkit-mask:url(mask.png) no-repeat; transition:1s;}
.box:hover{-webkit-mask-position:100% 100%;}
</style>

星宇非凡

关注

1
点赞
踩
0

收藏

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

Css_新UI方案圆角border-radius: 1-4个数字 / 1-4个数字前面是水平，后面是垂直不给“/”则水平和垂直一样border-radius: 10px/5px;参数各种长度单位都可以：px，%，…%有时很方便但宽高不一致时不太好用法1个：都一样border-radius: 一样2个：对角border-radius: 左上&右下右上&a...
复制链接

扫一扫

专栏目录