Home > Web Front-end > HTML Tutorial > 对话框css3实现方式_html/css_WEB-ITnose

对话框css3实现方式_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:49:07
Original
969 people have browsed it

<style type="text/css"> #box { margin-left:80px; margin-top:20px; padding-left:20px; height: 60px;  background: #2aa1c8; position: relative;  border-radius:10px; border:1px solid #1c82a3;}#box:before{   content:"";   position: absolute;   right: 100%;   top: 16px;   width: 0;   height: 0;   border-top: 12px solid transparent;   border-right: 12px solid #1c82a3;   border-bottom: 12px solid transparent;}#box:after {   content:"";   position: absolute;   right: 100%;   top: 18px;   width: 0;   height: 0;   border-top: 10px solid transparent;   border-right: 10px solid #2aa1c8;   border-bottom: 10px solid transparent;}  </style>  <body class="">    <div style="width:60px;height:60px;background:#ccc;float:left;"></div> <div id="box">对话框</div></body>//before伪类作为三角的边框//此对话框是自适应屏幕大小的
Copy after login

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template