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:腾讯软件中心静态页面制作( ...
随机推荐
- elixir东游记：实现一个简单的中文语句解析
备份:https://zhuanlan.zhihu.com/p/46030123 代码地址:github:pyzh/gdpl-ex.poc-1 原语句是:List1为'12332234':记a为Lis ...
- FTP软件FileZilla 3.38.1下载
FTP软件FileZilla 3.38.1下载 filezilla软件简介 FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能,具备极好的可控性及条理性 ...
- Oracle 11g OGG mgr定期清理tail 文件
OGG mgr定期清理tail 文件 2018-06-11 11:58 440 0 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/28 ...
- 终端的rz命令，覆盖原文件。
不覆盖:rz 覆盖 同名文件:rz -y
- SolrCloud7.4（Jetty容器）+mysql oracle 部署与应用
SolrCloud7.4(Jetty容器)搭建 1.Zookeeper搭建 版本:zookeeper-3.4.10.tar.gz 1.把zookeeper安装包上传到服务器 2.zookeeper解压 ...
- Linux 下编程
关于Linux 下的C语言编译命令和编程要点! https://www.cnblogs.com/wfwenchao/p/3985153.html?utm_source=tuicool&utm_ ...
- Java中常见的分页算法
在查询数据的时候或者展示数据的时候经常会使用分页,介绍几种简单的分页算法: //总的页数 int total = 30: //每页个数 int pageSize = 6; 1.one int ...
- tensorFlow小结
1,才云科技的书 <实战G深度学习框架>是一本好书,我的练习基本上都在其示例上运行,网上查看的示例都类似. 2,windows下安装了anaconda,采用spyder来运行python ...
- 安装oracle数据库的操作步骤
1. vnc启动之后,进入数据库安装包所在目录,此处是/home/DB/backup/database 2. 输入命令 ./runInstaller 3. 弹出linux图形化界面,同时弹出Oracl ...
- JS 返回上一页并刷新代码整理
一:JS 重载页面,本地刷新,返回上一页: <a href="javascript:history.go(-1)">返回上一页</a> <a href ...