css/ html help in making rounded table like container

后端未结

关注

 8  1977

野趣味

can anyone provide insight or a sample of how to create a css based bubble container for html to go inside it?

im looking to make a rounded table. that is to say i want

相关标签:

8条回答

抹茶落季

2021-01-26 06:17

The boxes can be given curvy or round corners using the border-radius attribute in CSS. Example:

#myBtn {
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 3px 3px 3px black;
  
}
#myBtn:hover {
  background-color: orange;
 }
 #myBtn2 {
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  box-shadow: 3px 3px 3px black;
  
}
#myBtn2:hover {
  background-color: orange;
 }

<!DOCTYPE html>

<html>

<head>
	<title> Test </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <div id="myBtn">
  Button
  </div>
  The above is a button with curved corners.
  <div id ="myBtn2">
  Button
  </div>
  The above is a button with pointed corners.
  </body>
  </html>

The more the number of pixels in border-radius, the rounder the corners get.

To know more about border-radius, please visit https://www.w3schools.com/css/css3_borders.asp

Hope this helps...

0 讨论(0)

名媛妹妹

2021-01-26 06:20
For browsers that support rounded corners, it's dead easy with a simple CSS function:
```
border-radius:10px;
```
To support older versions of Firexfox, you will need -moz-border-radius as well.

Internet Explorer doesn't support rounded corners in CSS, but you can use CSS3Pie as a hack to allow it to support them. See the CSS3Pie website for more info on exactly how to use it.

However note that rounded corners on a table element are likely to be problematic. You'll want to wrap your table with a <div> and put the rounded corners on that instead.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2021-01-26 06:20

This is the best example and explanation I have seen of box with rounded corners.

The All-Expandable Box

There are many ways to do it, use this as some inspiration.

0 讨论(0)
发布评论:

提交评论
- 加载中...
悲哀的现实

2021-01-26 06:26

Depends. if you need it to fully compatible with browsers that don't support CSS3, then try Here

if you want css3 rounded corners then try here for:
#example1 { -moz-border-radius: 15px; border-radius: 15px; }

0 讨论(0)
发布评论:

提交评论
- 加载中...

说谎

2021-01-26 06:30

I may have misread the question and, if so, please accept my apologies.

As far as I can tell, the rounded corners in the example you give are, like I previously said in a comment, done by images. You should look into @Teja's answer as he points you in the right direction but, just for you reference, here goes the HTML and CSS used to recreate the layout you mention:

<div id="chat-panel"><h3>We Are Here to Help!</h3>
    <p>We are extremely proud of our support and are available to help you at anytime.</p>
    <span class="panel-bottom">
        <a href="javascript: var e = window.open('http://livechatserver.seekdotnet.com/SightMaxAgentInterface/PreChatSurvey.aspx?accountID=1&amp;siteID=1&amp;queueID=2','chatWindow','width=490,height=404,resizable=0,scrollbars=no,menubar=no,status=no');">
            <img alt="Click Here to chat with us" src="/images/button/btn_chat_new.gif">
        </a>
    </span>
</div>


#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}

#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}

#chat-panel p {
padding:0 10px;
}

#chat-panel .panel-bottom, #special-offer .panel-bottom {
background:url("http://www.seekdotnet.com/images/sidepanel_bottom.png") no-repeat scroll left bottom transparent;
display:block;
padding-bottom:10px;
}

0 讨论(0)

悲&欢浪女

2021-01-26 06:33

A CSS3 rounded corner example to get you started:

<div class="mysexaybox">
    <p>Cos boxes were made to be sexay!</p>
</div>

.mysexaybox {
    background: #ccc;
    background: -moz-linear-gradient(top, #ffffd, #bbb);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffd), to(#bbb));
    border: 1px solid #bbb;
    color: #000;
    padding: 4px 8px;
    text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

DD_roundies is a decent solution if you absolutely must support IE6-8 (IE9 will support the rounded corners above)

0 讨论(0)

1 2 下一页