Summary of CSS3 practical methods (recommended)

Summary of CSS3 practical methods (recommended)

1. Rounded border:

CSS CodeCopy content to clipboard
  1. border -radius : 4px ;

2.Box shadow:

CSS CodeCopy content to clipboard
  1. box-shadow : 5px   5px   3px   #000 ; /* The parameters are rightward expansion distance, downward expansion distance, shadow width, color*/   

3. Background image size:

CSS CodeCopy content to clipboard
  1. div{
  2. background : url (bg_flower.gif);
  3. -moz- background - size : 63px   100px ; /* Older versions of Firefox */   
  4. background - size : 63px   100px ;
  5. background-repeat : no-repeat ;
  6. }

4. Background image location

CSS CodeCopy content to clipboard
  1. div{
  2. background : url (bg_flower.gif);
  3. background-repeat : no-repeat ;
  4. background - size : 100% 100%;
  5. -webkit- background -origin: content -box; /* Safari */   
  6. background -origin: content -box; /*border-box, padding-box*/   
  7. }

5. Text Shadow

CSS CodeCopy content to clipboard
  1. text-shadow : 5px   5px   3px   #000 ; /*The parameters are rightward extension distance, downward extension distance, shadow width, and color */   

6. Force automatic line wrapping

CSS CodeCopy content to clipboard
  1. p {
  2. word-wrap:break-word;
  3. }

7. Column

CSS CodeCopy content to clipboard
  1. div{
  2. column-gap: 3px ; /* Length of the gap between columns */   
  3. -moz-column-count:3; /* Firefox */   
  4. -webkit-column-count:3; /* Safari and Chrome */   
  5. column-count:3;
  6. }

The above summary of CSS3 practical methods (recommended) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522362.html

<<:  Detailed explanation of three ways to set borders in HTML

>>:  Detailed explanation of .bash_profile file in Linux system

Recommend

Solution to the problem that input in form cannot be submitted when disabled

I wrote a test program before, in which adding and...

React useMemo and useCallback usage scenarios

Table of contents useMemo useCallback useMemo We ...

Example of creating circular scrolling progress bar animation using CSS3

theme Today I will teach you how to create a circ...

Some suggestions for HTML beginners and novices, experts can ignore them

Feelings: I am a backend developer. Sometimes when...

A Deeper Look at SQL Injection

1. What is SQL injection? Sql injection is an att...

Vue implements the full selection function

This article example shares the specific code of ...

Inspiring Design Examples of Glossy and Shiny Website Design

This collection showcases a number of outstanding ...

Introduction to fourteen cases of SQL database

Data Sheet /* Navicat SQLite Data Transfer Source...

Docker View Process, Memory, and Cup Consumption

Docker view process, memory, cup consumption Star...

How to configure two or more sites using Apache Web server

How to host two or more sites on the popular and ...

The whole process of configuring reverse proxy locally through nginx

Preface Nginx is a lightweight HTTP server that u...

Mac+IDEA+Tomcat configuration steps

Table of contents 1. Download 2. Installation and...

MySQL starts slow SQL and analyzes the causes

Step 1. Enable MySQL slow query Method 1: Modify ...

Several solutions for forgetting the MySQL password

Solution 1 Completely uninstall and delete all da...

A brief discussion of the interesting box model of CSS3 box-sizing property

Everyone must know the composition of the box mod...