CSS3_background url right bottom-CSDN博客

本文链接：https://blog.csdn.net/u014584271/article/details/104995361

css3属性总结

c3边框

c3圆角

在css3中添加了border-radius属性,可以为边框创建圆角
例子
在这里插入图片描述
可以看到,上图的边框通过border-radius属性设置为25px,它变成了圆角

代码

div
{
	border:2px solid red;
	padding:10px 40px;
	background:#dddddd;
	width:300px;
	border-radius:25px;
}

边框图片

使用border-image属性,可以使用图像来创建边框

语法

border-image: url 图片地址选择图片位置偏移(上右下左) 图片边界的宽度设置图像重复等值;

其中最后一个值最重要,它的值有

repeat 重复
round 铺满(选定偏移的部分进行重复)
stretch 拉伸(选定偏移的部分大小进行拉伸)
例子

在这里插入图片描述

代码实现

.border{
    border: 10px solid transparent;
    padding: 15px;
}
.borderimg1 {
    border-image: url(border.png) 30 round;
}

.borderimg2 { 
    border-image: url(border.png) 30 stretch;
}

c3背景

background-image属性

c3总可以使background-image给背景添加图片,可以添加多张图片,写在前面的图片在显示在上,写在后面的图片显示在下

例子
在这里插入图片描述
可以看到,flower的背景的地址引入在后面背景之前,因此它覆盖了下面的背景

代码

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

这段代码也可以写成下面的样式来简化代码

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-size 属性

background-size用来指定背景图的大小.在c3之前,背景的大小由图像四级大小决定.

可以指定百分比或者像素.其中百分比是相对于父元素的高度和宽度.

例子

div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

这段代码也可以写成这样

div{
	background: url(xxx.webp) 80px 60px no-repeart;
}

background-origin 属性

本属性可以指定背景图像的位置区域.一个元素的content-box,padding-box以及border-box这三个区域可以都可以放置背景图像
在这里插入图片描述
例子

可以看出,这张笑脸的背景图通过background-origin属性的设置出现在了不同的位置

#div1
{
	background-origin:border-box;
}
#div2
{
	background-origin:content-box;
}

background-clip属性

本属性可以指定背景包含的位置, 它的取值包含
“conten-box” “padding-box” "border-box"默认值为border-box

效果如下

在这里插入图片描述

#example1 {
    background-clip: border-box;
}
#example2 {
    background-clip: padding-box;
}
#example3 {
    background-clip: content-box;
}

css3渐变

css3线性渐变

语法

#grad {
background-image: linear-gradient(#e66465, #9198e5);

例子

这是默认的情况,颜色变化从上到下
在这里插入图片描述
可以修改其中的变化方向,比如

background-image: linear-gradient(to right, red , yellow);

在这里插入图片描述
再比如

background-image: linear-gradient(to bottom right, red, yellow);

在这里插入图片描述
还可以使用角度来控制变化的方向

background-image: linear-gradient(angle, color-stop1, color-stop2);

在这里插入图片描述

其中的颜色可以使用rgba()函数,这样它的透明度也会随之发生改变

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

在这里插入图片描述

重复的渐变

语法

background-image: repeating-linear-gradient(red,yellow10%,green 20%);

其中的百分比是指颜色变化的停止位置

也可以引入角度进行变化

CSS3 径向渐变

background-image: radial-gradient(shape size at position, start-color, …, last-color);

你可以用这个函数指定渐变中心位置(默认为center),指定渐变图形的形状(默认为ellipse椭圆形),渐变的大小(默认是fartest-corner,最远的角落)

#grad1 {
background-image: radial-gradient(red, green, blue);
}

在这里插入图片描述

c3文本效果

c3文本阴影

text-shadow属性可以用于文本阴影,效果如下
在这里插入图片描述
语法

text-shadow: h-shadow v-shadow blur color;

其中 h 和 v 是阴影偏离的水平和垂直距离,blur是开始模糊的位置,color没的说

代码

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

css3盒阴影

css3中添加了box-shadow属性,它有几个值

语法如下

box-shadow: h v blur spread color inset;

各项的详细介绍

h 阴影的水平位置,可以为负
v 阴影的垂直位置,可以为负
blur 可选值,模糊距离
spread 阴影的大小,默认于元素一样大
color 没什么好说的
inset 从外层阴影改变阴影的内层阴影

例子
在这里插入图片描述

代码

div{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}

你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

#boxshadow {
    position: relative;
    b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    pa dding: 10px;
    bac kground: white;
} 
#boxshadow img {
     width: 100%;
     border: 1px solid #8a4419;
     border-style: inset;
} 
#boxshadow::after {
     content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

在这里插入图片描述
图片下方就是它的阴影,看起来效果很好

用box-shadow实现卡片效果

在这里插入图片描述

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

text-overflow属性

对本文溢出的处理,有三种属性

clip 直接裁剪文本
ellipsis 使用省略号结束文本
在text-overflow: ;属性中直接写入单引号括起来的字符串,可以以这个字符串进行溢出文本的结尾

在这里插入图片描述

单词拆分规则

word-break属性用来指定非cjk脚本的断行规则

它的值有

keep-all 只允许在半角空格或连字符处换行
break-all 允许在单词中换行

效果如下
在这里插入图片描述
可以看出上方的单词都没有被拆分,都是在半角空格和连字符换行,而下方就直接在单词内换行.

长句子拆分规则

使用word-wrap属性

有两种取值

normal
break-word,允许在长单词或者很长的url地址内换行

效果
在这里插入图片描述

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

可以看到它在一个长单词之内换行了