Home >Web Front-end >HTML Tutorial >Can any hero help me dig out this rounded rectangle_html/css_WEB-ITnose

Can any hero help me dig out this rounded rectangle_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:10:061084browse

I’m not very familiar with CSS, but I really want to use the rounded rectangle of this website into my own website. I have no choice but to ask for help.

It’s the kind of piece below, with The shadow is thicker when the mouse moves up.
I want the necessary css for the rounded rectangle and then use it in my own website. Thank you everyone.

http://www.tuita.com/#All


Reply to discussion (solution)

http://aliceui .com/1px-round-corner/

The one upstairs has no projection, and the corners are not round enough, which is still far from the effect

You can’t see the rounded corners, it seems that it is not compatible.

This is Firefox's implementation of css3 box shadow. Currently, css3 has not been finalized, so this is only temporary and many other browsers do not support it yet.

 body{ background-color:#EAEAEA;} div{   -moz-border-radius: 5px 5px 5px 5px;    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);   width:400px;     background-color:#fff; padding:8px;    } 

<div>http://www.mijia.org/blog/?p=204颠覆网络35天 ─ 使用-moz-box-shadow渲染阴影原文地址:shadow boxing with -moz-box-shadow系列地址:颠覆网络35天====================================在Firefox 3.5中实现的CSS特性中还有一个很有意思的──盒子阴影。这个特性允许在任何支持盒子模型的元素上投射出“阴影”效果。由于CSS3的盒子阴影属性目前还在发展中,所以Firefox特化的把他实现为-moz-box-shadow。这种特化方式是Firefox实现CSS中的实验属性的方法之一,在属性前面加上前缀“-moz-”。等到这个属性最终被CSS3确定之后,属性会重新命名为“box-shadow”。</div>

This rounded corner is not compatible with ie

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