div css background gradient color code example-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

div css background gradient color code example

PHP中文网

Mar 22, 2017 am 10:12 AM

cssdiv

Use CSS to make the DIV background color gradient, suitable for browsers such as IE and Chrome.

Code:

<style type="text/css"> 
.jbkeleyi{ 
height: 300px; 
width:100px; 
margin:0px auto; 
background-image: -moz-linear-gradient(top, #F00, #000); 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00FF00&#39;, endColorstr=&#39;#FF0000&#39;, GradientType=&#39;0&#39;); 
} 
</style> 
</head>
<body>
用CSS是p颜色渐变：<br />
<p class="jbkeleyi">从绿到红<br /><br />keleyi.com</p>

Rendering:

In addition, multi-browser compatible code:

FILTER: progid:DXImageTransform.Microsoft. Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE*/

background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*Firefox* /

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*Google*/

HTML5 Canvas: Draw gradient color

css button gradient color

css gradient color omitted Detailed introduction to mark embedded font text shadow

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How does deepseek achieve mouse scroll event penetration effect through CSS?Apr 30, 2025 pm 02:57 PM

How to achieve the effect of mouse scrolling event penetration? When browsing deepseek's official website, you may notice an interesting phenomenon: when the mouse hovers over a button...

How to configure HTML code formatting rules in VSCodeApr 30, 2025 pm 02:54 PM

The steps to configure HTML code formatting in VSCode are as follows: 1. Add configuration in settings.json, such as {"html.format.wrapAttributes":"force-aligned","html.format.wrapLineLength":80}. 2. Choose the appropriate formatting tool, such as Prettier or Beautify. 3. Gradually adjust the configuration and use the preview function to debug to avoid configuration conflicts. Through these steps, you can effectively manage and optimize HTML code formatting in VSCode,

How to change the symbolic style of HTML list itemsApr 30, 2025 pm 02:51 PM

Changing the symbolic style of HTML list items can be achieved through CSS. 1) Use the list-style-type attribute to change the default symbol, such as ul{list-style-type:square;}. 2) Customize symbols through ::marker pseudo-elements, such as ulli::marker{content:"✨";}, but you need to pay attention to compatibility issues. 3) Use list-style-image attribute or background-image to combine padding to insert image symbols, such as ul{list-style-image:url('path/to/your/image.

How to customize the size and shape of HTML buttonsApr 30, 2025 pm 02:48 PM

The size and shape of buttons can be customized through HTML and CSS. 1) Use width and height attributes to set the button size. 2) Control the degree of rounded corners through the border-radius attribute. 3) Use the transform attribute of CSS3 to create complex shapes, such as diamond buttons.

Notes on writing HTML with the Atom EditorApr 30, 2025 pm 02:45 PM

The advantages of writing HTML in Atom include a clean interface, support for customization and plug-in extensions, and active community support. 1. The Atom interface is simple and easy to use. 2. Support custom themes and plug-ins to meet personalized needs. 3. The community is active and provides rich resources and support, such as the atom-html-preview plug-in that can preview the effects in real time.

How to set the rotation effect of HTML elementsApr 30, 2025 pm 02:42 PM

How to set the rotation effect of an element in HTML? It can be achieved using CSS and JavaScript. 1. The transform property of CSS is used for static rotation, such as rotate(45deg). 2. JavaScript can dynamically control rotation, which is implemented by changing the transform attribute.

The Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.