CSS学习笔记_day7
目录
1、径向渐变
2、 线性渐变
3、 背景图片裁剪
4、 背景图片大小
5、 边框图片
6、 边框圆角
7、 边框阴影
8、位移
9、 倾斜
10、 旋转
11、 缩放
12、 文本换行
13、 文本溢出
1、径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width: 500px;
height: 500px;
border: 2px solid black; } p:first-child{
background-image: radial-gradient(red,orange,yellow,green,cyan,blue,purple);
/*设置径向渐变 没有设置渐变方向 默认中心点开始煎饼*/
} p:nth-child(2){ border-radius: 50%;
/*变成球*/
background-image: radial-gradient(450px at top left,white 30%,red 70%,black 100%); /*100px at top left 整个渐变的大小就是100px at top left将其定义到顶端 450Px渐变在450长度中产生*/ background-image: radial-gradient(450px at 30px 20px,white 30%,red 70%,black 100%);
/*渐变从30px 20px开始 即设置他的定位点 定义圆心*/ }
</style>
</head>
<body>
<p>我是径向渐变</p>
<p>我是个球</p>
</body>
</html>
2、线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width: 200px;
height: 200px;
border: 1px solid red;
color: #ffffff;
}
p:nth-child(1) {
/*第一个孩子*/ background-image: linear-gradient(to bottom, red, blue);
/*linear-gradient表示设置线性渐变*/
/*方向 起始的颜色 最后的颜色*/ background-image: linear-gradient(to left, red, blue);
/*从右向左*/ }
p:nth-child(2){
background-image: linear-gradient(90deg,red 0,yellow 45%,green 80%,purple 100%);
/*0是从底部往上 180是从上往下 90度是左边 270度右边 360度底部*/
/*左边是0% 到405%的地方是黄色到下一个是黄色的过渡阶段*/
} </style>
</head>
<body>
<p>
我是线性渐变
</p>
<p>我是线性渐变</p>
</body>
</html>
3、背景图片裁剪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 600px;
height: 600px;
margin: 200px auto;
border: 100px solid rgba(255,0,0,0.1); background-image: url(../imgs/gq1.jpg);
background-repeat: no-repeat;
padding: 60px; /*以下为内容裁切和内容定位*/ background-clip: border-box;
/*边框部分*/
background-origin: border-box;
/*内容部分是相对于border部分开始的*/
/*两天命令基本都是连起来用的*/ /*background-clip: padding-box;*/
/*页边距部分*/
/*background-origin: padding-box;*/ /*background-clip: content-box;*/
/*background-clip 把背景图片剪裁到内容区域*/*/ /*background-origin: content-box;*/
/*设置背景图片是相对内容来定位*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4、背景图片大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
border: 2px solid green;
background-image: url(../imgs/gq2.jpg);
margin: 200px auto;
background-repeat: no-repeat; /*background-size: 400px 200px;*/
/*可以控制背景图片的宽和高*/ background-size: cover;
/*cover会覆盖整个盒模型*/ background-size: contain;
/*按照某条边的比例去计算 选择最大的那条边 保证最大那条边被覆盖*/ }
</style>
</head>
<body>
<div> </div>
</body>
</html>
5、边框图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
width: 600px;
height: 600px;
border:1px solid black;
background-color: rgb(33,200,100);
border-image-source: url("imag/1.png");
/*切割方式1*/
/*切割之后的四角*/
border-image-slice:;
/*切割之后中间部分*/
border-image-width: 100px;
/*切割后中间部分重复*/
border-image-repeat:repeat;
/*边向外扩散100*/
border-image-outset:;
margin:300px auto; } </style>
</head>
<body>
<div class="d1">切割之后的四角</div> </body>
</html>
6、边框圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 500px;
height: 500px;
background-color: yellow;
/*边框变成圆*/
border-radius: 50%;
margin:0 auto;
}
.d2 {
width: 500px;
height: 500px;
background-color: yellow;
/*顺时针*/
border-radius: 10px 50px 90px 180px;
margin:0 auto;
}
.d3 {
width: 500px;
height: 500px;
background-color: yellow;
/*只改左上圆角*/
border-top-left-radius: 150px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
</body>
</html>
7、边框阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a1{ width: 500px;
height: 500px;
background-color: yellow;
margin:300px auto;
/*添加阴影*/
/*可以写正负值，（x轴偏移，y轴偏移，模糊程度，颜色）*/
box-shadow: -30px -30px 50px black;
}
.a2 {
width: 500px;
height: 500px;
background-color: yellow;
margin:300px auto;
border-radius: 50%;
/*内阴影*/
box-shadow:inset -50px -50px 100px black;
}
</style>
</head>
<body>
<article class="a1"></article>
<article class="a2"></article>
</body>
</html>
8、位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
width: 400px;
height: 400px;
background-color: gold;
transition: 3s; }
.d2{
width: 400px;
height: 400px;
background-color: blue;
transition: 3s;
/*设置位移动作发生的的时间*/
} .d1:hover{
transform:translate(400px,400px);
/*默认往右*/
} .d2:hover{
transform:translate(0,400px);
/*默认往右*/ transform:translateY(0,400px);
/*控制盒子移动方向仅为Y轴*/
}
</style>
</head>
<body>
<div class="d1">我是盒子1号</div>
<div class="d2">我是盒子2号</div>
</body>
</html>
9、倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
margin: 300px auto;
transition: 3s;
}
.d1:hover{
transform: skew(45deg);
/*做变换都用transform*/
background-color: red;
/*倾斜的中心点在中心*/
}
.d2:hover{
/*transform: skew(-45deg);*/
/*transform: skew(-45deg,30deg);*/
/*一个参数表示旨在x轴方向倾斜 两个参数表示xy两个方向倾斜相应的角度*/
transform: skewY(-45deg,30deg);
/*加个Y表示只在y轴方向倾斜*/
background-color: yellow;
transform-origin: left;
/*绕着某条边倾斜 一般绕y轴方向的左右两边倾斜*/
background-color: yellow;
} </style> <!--ps描边效果-->
<!--多边形套索工具-->
<!--con+j-->
<!--fx 添加图层样式 描边为白色-->
<!--c+s保存成png格式-->
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
10、旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
border: 2px solid red;
margin-bottom: 50px;
background-color: green;
margin: 150px auto;
}
/*基本样式*/ .d1{
background-color: green;
transition: 3s;
} .d2 {
background-color: yellow;
transition: 3s;
} .d1:hover{
transform: rotate(45deg);
/*表示旋转度数 正值为顺时针 负值为逆时针*/
background-color: red;
} .d2:hover{
transform: rotate(-45deg);
/*表示旋转度数 正值为顺时针 负值为逆时针*/
background-color: gold;
transform-origin: top right; } </style>
</head>
<body>
<div class="d1">我要顺时针</div>
<div class="d2">我要逆时针绕着右上角旋转</div>
</body>
</html>
11、缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:;
margin:;
} div{
width: 500px;
height: 500px;
border: 2px solid red;
margin: 500px auto;
} p{
width: 500px;
height:500px;
border: 2px solid blue;
transition: 3s;
/*动画播放时长*/
} p:hover{
/*transform: scale(2);*/
/*一个参数默认xy两个方向都有位移*/ transform: scale(0.5,2);
/*在x轴上缩小为0.5 y轴上放大为2*/
}
</style>
</head>
<body>
<div>
<p>我现在170，我要长到180</p>
</div>
</body>
</html>
12、文本换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
border:1px solid red;
}
/*设置字母换行 */
#d1{
width: 200px;
height: 100px;
border:1px solid red;
word-break:break-all;
}
/*设置文字在空格处换行*/
/*只有遇到边框才会换行*/
#d2{
width: 200px;
height: 100px;
border:1px solid red;
word-break:keep-all;
}
</style>
</head>
<body>
<div>
我要换行我要换行我要换行我要换行我要换行
</div>
<!--没法识别英文单词，无法实现换行-->
<div>
hgdsygdiebndzgfstfdyuagefjwbghktyfssluhiodvssyufye
</div>
<!--英文字母换行：设置word-break-->
<div id="d1">
hgdsygdiebndzgfstfdyuagefjwbghktyfssluhiodvssyufye
</div>
<!--文字遇到边框在空格处换行-->
<div id="d2">
我要换行 我要换行我要换行 我要换行我要换行我怕就要汉化我要换号 我要换行我要换行我怕就要汉化我要换号我要换行 我要换行我要换行我怕就要汉化我要换号我要换行我要换行我怕就要汉化我要换号
</div>
</body>
</html>
13、文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d0 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
}
.d1 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*溢出隐藏*/
overflow: hidden;
}
.d2 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*隐藏*/
overflow:auto;
}
.d3 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*隐藏*/
/*裁掉后面不显示的部分*/
text-overflow: clip;
}
.d4 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*隐藏*/
/*省略后面不显示的部分*/
text-overflow: ellipsis;
} </style>
</head>
<body>
参照
<div class="d0">我最喜欢红欧盟里面的林黛玉林贝贝</div>
hidden
<div class="d1">我最喜欢红欧盟里面的林黛玉林贝贝</div>
auto
<div class="d2">我最喜欢红欧盟里面的林黛玉林贝贝</div>
clip
<div class="d3">我最喜欢红欧盟里面的林黛玉林贝贝</div>
ellipsis
<div class="d4">我最喜欢红欧盟里面的林黛玉林贝贝</div> </body>
</html>
2018-07-10 20:26:02 擢摩一下改 于教室
CSS学习笔记_day7的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- 基于thinkphp的后台管理系统模板快速搭建
当我们在搭建网站的时候,后端开发人员在编写后台的管理系统的时候,往往会因为缺少一个合适的后台管理系统的模板,而必须去重新编写一个,这几天由于工作上的安排,需要去研究一下thinkcmf的后台管理系统, ...
- Python实现简单的四则运算
GitHub 项目地址 https://github.com/745421831/-/tree/master PSP PSP2.1 Personal Software Process Stages 预 ...
- PyCharm for windows 快捷功能（图片形式讲解）
- 刷seed有感
今天又把seed刷了一遍 昨天去了基佬他们公司.第一次去他们公司.米虫科技,在重庆算是一家中型公司吧. 他去公司加班写一个游戏的封面,第一次感觉ui的不给设计图真的很坑.一个页面所有东西 自己凭感觉写 ...
- android 重启app
package com.xproject.utility; import java.lang.reflect.Field; import java.lang.reflect.InvocationTar ...
- windows+nginx负载测试
系统:windows2003nginx版本:1.7.3(官方推荐版本 #父节点 http upstream cluster_1{ ip_hash;#能较好地把同一个客户端的多次请求分配到同一台服务器处 ...
- 网络拓扑_华三H3C的路由器+交换机
最近在弄公司网络,目前的拓扑图长这样:点击查看网络拓扑图 华三的路由器和交换机都可以通过Console口进行配置,如下: 用SecureCRT.或者putty.或者windows的超级终端,打开ser ...
- js jquery 正则去空字符
1.正则去空字符串: var str1=" a b c "; var strtrim=str1.replace(/\s/g,""); 2.js去前后空字符串: ...
- 关注Yumiot公众号，了解最新的物联网资讯
Yumiot,专注于物联网行业,每天不定期推送最新的物联网行业新闻.详情请用微信搜索关注 yumiot .
- MobX+react使用小demo
第一次接触mobx,网上找了很多例子,写此主要总结一下create-react-app + mobx入门 create-react-app myreact cd myreact npm install ...