HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转

野性酷女 2022-08-22 15:13 188阅读 0赞

边框背景图片

1、  background-origin：设置背景图片的起始原点

background-origin:border-box;------背景图片从边框开始显示

background-origin:padding-bax;-----背景图片从内边距开始显示（默认）

background-orign:content-box;------背景图片从内容区域开始显示

例子：

.div1\{

width:500px;

height:300px;

border:30px solidred;

background:url(nimg269\_1.jpg)no-repeat;

background-origin:border-box;

2、  background-clip：将背景图片做适当的裁剪以适应实际需要

background- clip:border-box;------背景图片从边框开始向外裁剪背景

background- clip:padding-bax;-----背景图片从内边距开始向外裁剪背景

background- clip:content-box;------背景图片从内容区域开始向外裁剪背景

background-clip:no-clip;------表示不裁切

多背景图

1、  多个背景：(中间用逗号隔开)

语法：

Background:url(图像位置) 重复方式, url(图像位置1) 依附方式1, url(图像位置3) 依附方式3…………………..

2、  Background-size:------------图像大小

大小分为：像素--

百分比

Cover------覆盖，以最小边等比例缩放

Contain-------包含，----以最长边等比例缩放

注意：像素和百分比的缺点：图片变形

Cover和contain的缺点：图片超出范围或者显示不全

加上之前的：简写为：

Background:背景颜色 图片路径 重复方式 依附方式 位置/图像大小；

注意：位置/图像大小，这两个不可以互换

CSS选择器

1、  关系选择器：

（1）      包含选择器

例子：.div1 p\{\}----指的是div1下的所有p元素

（2）      子选择器

例子：.div1>p\{\}------指的是div1下的子元素p

（3）      相邻选择器

例子：.div1+p\{\}------div1下面相邻的p元素(一条)

（4）      兄弟选择器

例子：.div1~p\{\}----- div1下的所有p元素

2、  伪类选择器

（1）      结构性伪类选择器

（2）      UI元素状态伪类选择器

3、  属性选择器

4、  伪对象选择器

开放的网络字体类型

语法：

@font-face\{

Font-family:字体名称;

Src:url(字体文件路径);

边框背景图片

语法：

border-image:url(文件路径) 上边框切片的大小 右边框切片的大小 下边框切片的大小 左边框切片的大小repeat streatch;

分开写：

border-image-repeat:stretch;-----拉伸;

border-image-repeat:repeat;-----重复;

border-image-repeat:round;-----平铺;

例子：

.div4\{

margin-top:200px;

width:400px;

height:400px;

background-color:darkred;

border:20pxsolid pink;

border-image:url(border.jpg)70 70 70 70 stretch round ;

注意：其中大小，不加px。并且不加谷歌的私有前缀，加上之后边框中间会平铺图片中间的图

媒体查询

1、  过渡\----加私有前缀

Transition:width 2s,height 2s,background2s;

如果时间都一样，则用：

Transition:all 2s;

例子：

.div1\{

width:200px;

height:100px;

background-color:blue;

border:1pxsolid black;

-webkit-transition:width2s, height 3s,background 2s;

-moz-transition:width2s, height 3s,background 2s;

2、  放大

Transform:scale(0.5,2);--------0.5为x轴，2为y轴（大于1的为放大，小于1 的为缩小）

3、  旋转

Transform-origin:left top;------------旋转的起始点，可以为像素，中心点为center

transform:rotate(60deg);----------旋转的度数，正数为顺时针；负数为逆时针

例子：实现一个正方形，鼠标经过5s之后成为一个圆

代码：

.div5\{

width:200px;

height:200px;

background-color:red;

border:1pxsolid black;

margin:100px0px;

.div5:hover\{

-webkit-transition:all5s;---------过渡时间

-webkit-transform:rotate(750deg);---------旋转

border-radius:100px;

HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端背景图放置_CSS3背景图片百分比及应用

相关 CSS3新增属性----背景和边框

相关 android 三角形背景图,CSS3 三角形渐变背景图

相关 CSS3——新增背景属性和边框样式

相关 CSS3 背景和边框

相关 HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转

相关 CSS3 选择器、颜色与度量单位、文本、边框、背景

相关 css3_边框与背景

相关 CSS3 变色背景动态边框

相关 css背景和边框，了解一下