纯CSS制作圆角矩形框知识总结_html/css_WEB-ITnose
在制作后台登录页的时候,需要从网页上面把那个圆角矩形框选取下来,然后通过Photoshop进行切割,在进行设置,最后得到需要的登录框的圆角矩形框。如下图。
但是登录最新的智囊团的那个登录页面的时候,上面的那个圆角矩形框已经没有了,最新的登陆页面跟QQ邮箱登录页面一样,没有了圆角矩形框。所以我就想到了用css自己堆出来一个圆角矩形框,通过查找资料,以及自己的一些使用方法的改进,最终得到了自己所需要的圆角矩形框??纯CSS设计圆角矩形框。
下面讲一下思路:圆角矩形框的难点就在于如何把那个圆角表示出来,其实我们把那个圆角的地方放大一下就会发现,所谓的圆角并不是严格的圆角,只是由于线条看起来比较和谐,那个圆角其实也是直角的框的那个直角。
这就是一个放大了的圆角矩形框,可以看到圆角的具体构成。
明白了原理,下面是代码的实现部分,非常简单:
<span style="font-family:KaiTi_GB2312;font-size:24px;"> <div class="divbox"> <div class="div1"></div> <div class="div2"></div> <div class="divmiddle"> 主要内容 </div> <div class="div2"></div> <div class="div1"></div> </div></span>
<span style="font-family:KaiTi_GB2312;font-size:24px;">/*圆角框的制作-CSS代码部分*/.divbox { width: 580px; }/*.div1 .div2 .divmiddle{ float :right ;}*/.div1 { background: #999999; border-left: #999999 solid 3px; border-right: solid 3px #999; margin: 0px 6px; height: 3px; overflow: hidden;}.div2 { background: #FFF; border-left: #999999 solid 3px; border-right: solid 3px #999; margin: 0px 2px; height: 3px; overflow: hidden;}.divmiddle { height: 285px; border-left: #999999 solid 3px; border-right: solid 3px #999;}.divmiddle p,h3,btnLogin,btnCancel{ float :right ;}</span>
通过代码可以看出,圆角矩形框通过3类的div标签进行组合设计,最终形成一个圆角矩形框。这里关键的是overflow属性,是把被覆盖的内容给隐藏了,所以可以露出自己需要的部分,这里的技巧需要读者自己思考。
接下来就是实战了,在middle中添加如下代码:
<span style="font-family:KaiTi_GB2312;font-size:24px;"><h3 id="牛腩新闻发布系统后台登录">牛腩新闻发布系统后台登录</h3> <img src="/static/imghw/default1.png" data-src="Images/步枪.jpg" class="lazy" alt="logo" style="max-width:90%" style="max-width:90%"> <p>用户名:<textbox id="txtUserName" runat="server"></textbox></p> <p>密 码:<textbox id="txtPassword" runat="server" textmode="Password"></textbox></p> <p>验证码:123456<textbox id="txtCode" runat="server" cssclass="txtcode" width="104px"></textbox></p> <p><button id="btnLogin" runat="server" text="登录"></button><button id="btnCancel" runat="server" text="取消"></button></p> <div><div class="footer">版权声明:©<a href="http://niunun.javaeve.com">牛腩</a> &<a href="http://www.tg029.com" target="blank">众志网</a> </div></div></span>
按照正常的理解,在圆角矩形框中会出现一系列的控件,事实上也是如此,但是却出现了另外一个问题,如下图:
圆角矩形框的边出现了空白,这是由于在使用了
,在这个正常流中这个部分的宽度比较大,把左右两边的正常流的边给撑开了,所以出现了断线的部分。那么只要把的部分从正常流中拿走就可以改正这个缺点,对,就是float属性,下面的效果是经过我半个下午2个小时的不断调试,最终形成的结果:
的部分从正常流中拿走就可以改正这个缺点,对,就是float属性,下面的效果是经过我半个下午2个小时的不断调试,最终形成的结果:
通过float属性,浮动控件,然后再重新进行定位,这样的效果看似简单,后面包含的过程却是对自己知识的一个总结提升,这个过程对我来说非常享受,全身心的投入到最后的效果出来,感觉那真是爽。当然了这个设计效果还是有提升空间的,比如把整个的框移到垂直方向上的中间线,等等,那就发挥你的想象力吧。
版权声明:本文为博主原创文章,未经博主允许不得转载。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
