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

Implementation steps of encapsulating components based on React

Table of contents Preface How does antd encapsula...

Implementation process of the magnifying glass effect in the Javascript example project

Table of contents Preface Case: Imitation of JD.c...

Detailed steps for installing ros2 in docker

Table of contents Main topic 1. Install Docker on...

Native js custom right-click menu

This article example shares the specific code of ...

A complete record of the process of building mobile applications using Vue Native

Table of contents Preface Features of Vue Native ...

CSS clear float clear:both example code

Today I will talk to you about clearing floats. B...

Detailed explanation of loop usage in javascript examples

I was bored and sorted out some simple exercises ...

A brief understanding of several scheduling algorithms for Nginx seven-layer load balancing

This article mainly introduces several scheduling...

Nodejs-cluster module knowledge points summary and example usage

The interviewer will sometimes ask you, tell me h...

Introduction to the usage of common XHTML tags

There are many tags in XHTML, but only a few are ...

Mysql transaction isolation level principle example analysis

introduction You must have encountered this in an...

MySQL 5.7 installation and configuration tutorial under CentOS7 64 bit

Installation environment: CentOS7 64-bit MINI ver...

Detailed explanation of Linux system software installation commands based on Debian (recommended)

Introduction to Debian Debian in a broad sense re...

Implementation of inserting millions of records into MySQL database within 10 seconds

First, let’s think about a question: To insert su...

HTML form tag usage learning tutorial

Forms in HTML can be used to collect various type...