css3 borders and backgrounds and text effects

This time I will bring you the border, background and text effects of css3. What are the precautions when using the border, background and text effects of css3. The following is a practical case, let’s take a look.

Simple play with CSS3 borders, background, and text effects

1. Border

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset(ontset);
//h-shadow：水平阴影 v-shadow：垂直阴影 blur：模糊距离 spread：阴影的尺寸 color：阴影的颜色 inset（outset）：内部阴影/外部阴影 
box-shadow: 5px 0 5px 0 #000 outset;//效果图如下

border-radius rounded corners

border-radius: 1-4 length|% / 1-4 length|%;
//第一个参数：水平半径 第二个参数:垂直半径
border-radius: 50%/20%;//效果图如下

Can be achieved by setting different border rounded corners A variety of border boxes

border-image

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
//边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺（repeated）、铺满（rounded）、拉伸（stretched）

2. Background

background-size Specifies the background image size

background-size: length|percentage|cover|contain;
//length：设置背景图片宽度和高度 percentage：根据父元素百分比设置背景图片宽度和高度 cover：背景图像扩展至足够大以使背景图像完全覆盖背景区域 contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-clip Specifies the "drawing" area of ​​the background

background-clip: border-box|padding-box|content-box;

background- origin Specifies the "positioning" area of ​​the background image

background-origin: padding-box|border-box|content-box;

PS: Pay attention to the difference between background-origin and background-clip. One is the positioning area and the other is the drawing area

3. Text-shadow

text-shadow Text-shadowEffect

<span style="color: #800000">text-shadow: h-shadow v-shadow blur color;<br>//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色<br>text-shadow: 5px 5px 3px #000;//效果图如下</span>

word-wrap Allows long indivisible words to be split and wrapped to the next line

<span style="color: #800000">word-wrap: normal|break-word;<br>//normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行</span>

word-break Specifies the line break rules for non-Chinese, Japanese and Korean text

word-break: normal|break-all|keep-all;
// normal：使用浏览器默认换行规则  break-all：允许在单词内换行 keep-all：只能在半角空格或连字符处换行

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate the unordered list attribute in JS

Safari browser select drop-down list text is too long and does not wrap Solution

The above is the detailed content of css3 borders and backgrounds and text effects. For more information, please follow other related articles on the PHP Chinese website!