Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Em cần giúp đỡ về border-radius trong CSS ạ

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi pth92, 8/11/12.

Lượt xem: 4,050

  1. pth92 Thành viên cấp 1

    Như tiêu đề các anh chị ơi!

    Em cần bo tròn cho textbox giống như thiết kế:
    [​IMG]
    Lên CSS lúc chưa bòn tròn thì như thế này:
    [​IMG]
    Nhưng khi em sử dụng border-radius để bo tròn thì nó lại xuất hiện viền trắng ở 4 góc:
    [​IMG]


    Còn đây là mã css em dùng cho textbox này:
    HTML:
    #text_search {
        background-image:url(../images/text_search_bg.jpg);
        background-repeat:repeat-x;
        margin:0;
        padding:0;
        position:absolute;
        top:50px;
        left:20px;
        width:300px;
        height:39px;
        outline:none;
        border:none;
        border-radius:10px;
        }
    Mong anh chị em hướng dẫn e khắc phục tình trạng này ạ.

    Cám ơn anh chị em nhiều <3

    ...
  2. pth92

    pth92 Thành viên cấp 1

    Có anh chị nào giúp e với ạ
  3. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Code:
    border: none
    Hình như là cái này. thử cho 1px solid màu nào đó nhạt nhạt xem
  4. phhuan89

    phhuan89 Mới đăng kí

    Bạn dùng background-color ấy đừng có dùng background-image là ổn, vì nó chỉ có 1 màu mà.
  5. pth92

    pth92 Thành viên cấp 1

    Dùng background-color ko được bạn ơi, tại phần dưới textbox nó còn một đường viền màu xám nữa, do trong thiết kế nên mình phải lấy theo nó.
  6. pth92

    pth92 Thành viên cấp 1

    Mình thử rùi bạn ơi, mình dùng màu cùng với nền luôn nhưng mà nó vẫn vậy hixx
  7. phhuan89

    phhuan89 Mới đăng kí

    bạn cho mình file html và css phần đó đi mình xem rồi sửa thử. Luôn cả cái file bg nhá.
  8. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Vậy thì thêm border-bottom là đc mà.Cứ vứt cái phần vừa nãy lên http://jsbin.com/ mọi người xem thử cho .Mà nếu giống trong thiết kế thì cái icon-search có thấy đâu
  9. pth92

    pth92 Thành viên cấp 1

    Mình chỉ mới code đến đó thì thấy lỗi, chưa code tới cái icon search bạn ơi..

    Mình up lên mediafire các bạn xem giúp mình nhé (lần đầu viết css nên chắc source hơi rối, các bạn thông cảm nha)


    mediafire.com/?wj3ow3ynsvu77vx
  10. pth92

    pth92 Thành viên cấp 1

    Thank mọi người nhiều ạ, giờ e đã tìm ra cách ngu của e và khắc phục nó thành công rùi ạ.

    :D Xin cám ơn mọi người rất nhiều ạ <3 <3
  11. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Sửa thế nào vậy bác .
    Mà trong css có mấy đoạn
    Code:
    background-image:url(.../images/content_bg.jpg);
    background-repeat:no-repeat;
    margin: 0px 0px 0px 0px;
    nên sửa thành
    background: url('link ảnh') no-repeat;
     
    và margin: 0;
    với lại position lạm dụng hơi nhiều.
    Code thì nên thụt đầu dòng làm sao cho dễ đọc,dễ nhìn chứ cứ đóng mở lung tung là đau hết cả mắt ,nên kèm comment để tiện bề sửa chữa
    
  12. pth92

    pth92 Thành viên cấp 1

    E xin ghi nhận ý kiến của bác ạ, vì là lần đầu viết css nên e chưa thể hệ thống một cách logic được, e sẽ cố gắng hơn trong những lần sau.

    Còn về cách sửa thì e cho nó bo tròn thẻ <div> xong rồi mới đặt textbox vào đó đặt thuộc tính:
    background-color: transparent
    outline:none;
    border:none;

    Lúc trước e cho nó bo tròn nguyên cái textbox nên mới xảy ra tình trạng đó.
    thanh_rossiPhạm Hữu Dư thích bài viết này.
  13. Phan Văn Quân

    Phan Văn Quân Thành viên cấp 2

    đầu tiên bạn lên formated css để nó căn chỉnh lại câu lệnh cho mình. đặt text box đó trong thẻ div rồi cho thẻ div đó border-radius: 10px;

Ủng hộ diễn đàn